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.
Top comments (1)
If you really want to understand these display types, you need to stop reading w3schools and read better sources like MDN. You need to understand the difference between replaced and non-replaced elements, and between in-flow and out of-flow elements because replaced inline elements respect top and bottom margins, and out of flow block-level elements do not take up the full width of their container. There's also far more to the difference between inline and inline-block elements than those you've mentioned. Inline-block elements generate atomic boxes (i.e. they cannot be broken across lines), are block containers that always establish block formatting contexts and often inline formatting contexts for their children, and have substantially different rules around vertical alignment, to name three differences.