Block vs. Inline Level Elements

Nearly all HTML elements are either block or inline elements. The characteristics of block elements include:

* Always begin on a new line
* Height, line-height and top and bottom margins can be manipulated
* Width defaults to 100% of their containing element, unless a width is specified

Examples of block elements include

, ,

,

,

and
• . The characteristics of inline elements, on the other hand, are the opposite of block elements:
  
  * Begin on the same line
  * Height, line-height and top and bottom margins can't be changed
  * Width is as long as the text/image and can't be manipulated
  
  Examples of inline elements include , , , , , and .
  
  To change an element's status, you can use display: inline or display: block. But what's the point of changing an element from being block to inline, or vice-versa? Well, at first it may seem like you might hardly ever use this trick, but in actual fact, this is a very powerful technique, which you can use whenever you want to:
  
  * Have an inline element start on a new line
  * Have a block element start on the same line
  * Control the width of an inline element (particularly useful for navigation links)
  * Manipulate the height of an inline element
  * Set a background colour as wide as the text for block elements, without having to specify a width