| Block Elements | Inline Elements | Inline-Block Elements |
|---|---|---|
| Block level elements normally start and end with a new line, when displayed in a browser. A block element has some whitespace above and below it and does not tolerate any HTML elements next to it. | Inline elements are normally displayed without line breaks. An inline element has no line break before or after it, and it tolerates HTML elements next to it. | An inline-block element is placed as an inline element (on the same line as adjacent content), but it behaves as a block element. |
| respects all paddings | left & right margins and padding, but not top & bottom | allow other elements to sit to their left and right. |
| force a line break after the block element | cannot have a width and height set | respect top & bottom margins and padding |
| p h1, h2, h3, h4, h5, h6 ol, ul pre address blockquote dl div fieldset form hr noscript table |
b, big, i, small, tt abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var a, bdo, br, img, map, object, q, script, span, sub, sup button, input, label, select, textarea |
A combination of block and inline is an example of inline-block with style=”display: inline-block” |
| From a rendering point of view, <div> == <span style=”display: block”> |
From a rendering point of view, <span> == <div style=”display: inline”> |
From a rendering point of view, <div> == <div style=”display: inline-block”> |
