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