18
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