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).

See the Pen
Block element example
by Joe Steinbring (@steinbring)
on CodePen.

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.

See the Pen
Inline element example
by Joe Steinbring (@steinbring)
on CodePen.

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.

See the Pen
Inline-block element example
by Joe Steinbring (@steinbring)
on CodePen.

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:

See the Pen
Block element example 2
by Joe Steinbring (@steinbring)
on CodePen.

 

Inline:

See the Pen
Inline element example 2
by Joe Steinbring (@steinbring)
on CodePen.

 

Inline-block:

See the Pen
Inline-block element example 2
by Joe Steinbring (@steinbring)
on CodePen.

 

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.

 

[ Cover photo by William Warby on Unsplash ]

Leave a Reply

Your email address will not be published. Required fields are marked *