Inline vs. Block vs. Inline-Block: CSS

So I haven’t really been covering CSS too much on this blog and I really want to get in-depth and have a mastery of it. But first I want to progress from some of the more basic concepts of Front-End Web Development, on to the more advanced. These building blocks are the foundation and it’s time I dug into it in more depth as opposed to a wide breadth (seems like I have binary trees on the brain right now).
 
This should be fun getting back to basics for a while with HTML & CSS. Gradually on this blog I’ll get back into covering more JavaScript and React.js.

 

CSS Display Property

Display is a property of CSS that controls how an element displays on the page.

 

Syntax

display: value;

 

Three values of the display property are inline, block, and inline-block.

There are plenty more but these are the three most common.
 

Inline

Span is a great example of an inline element. Great demonstrations and descriptions are provided by MDN:

<p>The following span is an <span class="highlight">inline element</span>;
its background has been colored to display both the beginning and end of
the inline element's influence.</p>

 
Below is the rendering of the example above. The span tag is wrapped around the highlighted section:
 

The following span is an inline element; its background has been colored to display both the beginning and end of the inline element’s influence.

 

An inline box flows with the document’s text (i.e. it will appear on the same line as surrounding text and other inline elements, and its content will break with the flow of the text, like lines of text in a paragraph.) Width and height settings have no effect on inline boxes; any padding, margin and border set on inline boxes will update the position of surrounding text, but will not affect the position of surrounding block boxes.

 

Block

Now div is an example of a block-level element. Below span has been replaced with div.

<p>The following div is an <div class="highlight">block-level element;</div>
its background has been colored to display both the beginning and end of
the block-level element's influence.</p>

 
And the rendering:
 

The following div is an

block-level element;

its background has been colored to display both the beginning and end of
the block-level element’s influence.

 

block box is the opposite of an inline box: it is defined as a box that’s stacked upon other boxes (i.e. content before and after the box appears on a separate line), and can have width and height set on it. The box model (ex: content, padding, border, margin, width, height) applies to block boxes.

 

Inline-Block

An inline-block box is something in between the first two: It flows with surrounding text without creating line breaks before and after it like an inline box, but it can be sized using width and height and maintains its block integrity like a block box — it won’t be broken across paragraph lines (an inline-block box that overflows a line of text will drop down onto a 2nd line, as there is not enough space for it on the first line, and it won’t break across two lines.)

 

CSS block vs inline vs inline-block
 
This image can be found here.

 

Let’s Put It Together

The following descriptions of the inline, block, and inline-block values are found here:
 
The inline value displays an element as an inline element (like <span>). Any height and width properties will have no effect.

The block value displays an element as a block element (like <p>). It starts on a new line, and takes up the whole width.

The inline-block displays an element as an inline-level block container. The element itself is formatted as an inline element, but you can apply height and width values.

 

And if everything above wasn’t your cup of tea, here’s a breakdown from Stack Overflow:
 
Inline elements:

  1. respect left & right margins and padding, but not top & bottom
  2. cannot have a width and height set
  3. allow other elements to sit to their left and right.
  4. see very important side notes on this here.

Block elements:

  1. respect all of those
  2. force a line break after the block element
  3. acquires full-width if width not defined

Inline-block elements:

  1. allow other elements to sit to their left and right
  2. respect top & bottom margins and padding
  3. respect height and width

 

Conclusion

So there we have it: Block vs. Inline vs. Inline-Block. And all the ways they differ in their glory.

Hopefully this article was helpful to you 🙂

Let me know your thoughts. 
 
With much love see you next time,
 
Danielle