Block Elements

 <div>, <p>, <h1>, <form>, <ul>, and <li>

* 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

Inline elements

<span>, <a>, <label>, <input>, <img>, <strong> and <em>

* 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

So, why change an element’s status using display: inline or display: block…?

* Have an inline element start on a new line – display:block;
* Have a block element start on the same line – display:inline;
* Control the width of an inline element – display:block;
* Manipulate the height of an inline element – display:block;
* Set a background colour as wide as the text for block elements, without having to specify a width – display:inline;