Block vs inline vs inline-block

I’m not sure that this concept is universally understood. I figured that it is time to take a swing at it.

According to w3schools, a block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).

In the above example, there are 4 inner divs contained within 1 outer div.

So, what about inline? According to w3schools, an inline element does not start on a new line and it only takes up as much width as necessary.

In the above example, there are still 4 inner divs contained within 1 outer div but you’ll notice that it no longer fills 100% of the width. Instead, it just uses the space that it needs for the content.

So, what about inline-block? According to w3schools, compared to display: inline, the major difference is that display: inline-block allows to set a width and height on the element. Also, compared to display: block, the major difference is that display: inline-block does not add a line-break after the element, so the element can sit next to other elements.

In the above example, the 4 inner divs still only fill the space that they need to fill but now you can see more of the outer div’s border and there is a right margin to the inner divs.

So, let’s try adding padding and margins to the three examples.

Block:

Inline:

Inline-block:

So, to recap a bit …

Block elements:

  • Force a line break after the element
  • Is 100% width if it isn’t defined otherwise

Inline elements:

  • Allows elements to sit to their right and left
  • Does not respect widths and heights
  • Does respect right and left margins and padding but not top and bottom

Inline-block elements:

  • Allows elements to sit to their right and left
  • Does respect widths and heights
  • Does respect top and bottom margins and padding

Have a question, comment, etc? Feel free to drop a comment, below.

18