Block, Inline and Inline-block Displays

Block

This paragraph is a block-level element. It takes up the width of its parent container by default.

Inline-block

This paragraph has been given an inline-block display via the CSS. It will now take up the width of its content.

Inline-block with width defined

Based on the previous example, this paragraph with display inline-block has been given a width of 300px. Just like block-level elements, one can specify width and height for all inline-block elements.

Inline

This paragraph has its display changed to inline using CSS. It will not respect any width and/or height defined for it, which is true for all elements with a display of inline. I have given this paragraph a width of 300px via an inline style, but it does not get applied. (Of course, you would probably use a span in the real world, but this is for demonstrative purposes).

Block

Block with height defined

This paragraph is a block-level element. It accepts the 200px height defined for it.

Inline-block

Inline-block with height defined

Based on the previous example, this paragraph with display inline-block has been given a height of 200px. Just like block-level elements, one can specify width and height for all inline-block elements.

Inline

This paragraph has its display changed to inline using CSS. It will not respect any width and/or height defined for it, which is true for all elements with a display of inline. I have given this paragraph a height of 200px via an inline style, but it does not get applied. (Of course, you would probably use a span in the real world, but this is for demonstrative purposes).

Block

This span element has been given a display: block. It now honours the 16px padding that I have declared without overlapping the next element, since a linebreak is created after it, which is expected of block level elements. Of course, you would probably use a paragraph here in the real world.

Inline-block

The same span from the above example has been given a display: inline-block courtesy the CSS. It honours the 16px padding that I have declared without overlapping the next element.

Inline - vertical padding

Here is an inline (non replaced) element i.e. a span. It honours the 16px padding that I have declared. However, the vertical padding will create an overlap because it exceeds the line-height of the blue span. (To redeem this, you would need to declare a much larger line-height for this span element.) The reason for this is that only the line-height is used when calculating the height of the line box.

Inline - horizontal padding

To build on the previous example, I have added a span before and after the blue span above. You can see that the left and right padding of the blue span do not overlap the elements before and after it.

Inline - multi-line padding

This is an example of a multi-line span. I have wrapped it inside a black paragraph with a fixed width to ensure it is multi-line across different screen sizes. As expected, the vertical padding of 5px overlaps across multiple lines because it exceeds the line height. You will also notice that the large horizontal padding-left of 22px is applied to the first line and the padding-right of 22px is applied to the last line only.

Inline - multi-line padding with line-height

Building upon the above example, I have given the span a large line-height of 2, so that the padding does not cause an overlap across multiple lines.

Inline - multi-line padding with very large line-height

Extending the previous example, I have increased the span's line-height from 2 to 3. You can see how inline elements continue to keep white-space between multiple lines, which would never happen if the display were block.

Block

In the above example, each word (foo, Span, bar) is wrapped in a span. However, the blue span has its display changed to block. Hence, the 16px margin is honoured, and a linebreak created above and below the blue span.

Block level elements - vertical margins collapse

In their default state, block level elements will have their vertical margins collapse. Although, the blue blocks have a 16px margin on all sides, the top and bottom margins have collapsed into margin of 16px.

Inline-block

In the above example, the blue span has its display changed to inline-block. The 16px margin is now honoured, yet the element manages to maintain its 'in-line' feature.

Inline-block level elements - vertical margins don't collapse

Unlike block level elements in their default state, the vertical margins of inline-block level elements will not collapse. I've given these inline-block elements a width of 100% so they appear as block level elements, for demonstration purposes only.

Inline

Although each word is wrapped in a span, I have added a margin of 16px only to the blue span. Observe how the left and right margins are honoured, but the vertical margins are not applied. Many devs wrongly believe that inline non-replaced elements don't accept margins, but this is wrong - i.e. they accept only horizontal margins, not vertical.

Inline - multi-line margins

This is an example of a multi-line span. I have wrapped a span inside a black paragraph with a fixed width. Of course, the span does not honour vertical margins. As expected, it applies the left margin of 30px to the first line and the right margin of 30px to the last line only.

Block - multi-line with borders

Inline-block - multi-line with borders

Inline - multi-line with borders

Inline

Inline or inline-block elements can lose this natural whitespace

View source to see the same.

Inline-block

Inline-block elements also retain a whitespace between each element.