What's the difference between an inline and inline-block element in CSS?

In CSS, inline and inline-block are two values assignable to an element's display property.

Inline Elements
An element's display with inline sets both its outer and inner display types to inline.

In the normal flow of the document set by the Initial Block Formatting Context, inline items create an Inline Formatting Context. Items with an outer value of inline are arranged one after the other in a line. They are moved to the next line if there is not enough horizontal space. The width of an inline element is defined by the width of its content. Vertical padding and margins are ignored, as they disrupt line spacing of the inline nodes.

The inner type of inline (set by the same inline keyword, used once) creates an Inline Formatting Context (IFC) for its children (e.g. text nodes inside a <span>), which tells them to follow the layout rules of IFC themselves.

This is very trivial, so we'll come to an example when comparing inline to inline-block.

Inline-block Elements
For inline-block elements, we have to assign their display properties to inline-block. This sets the outer display type to inline and the inner type to block.

The outer display value of inline essentially tells the item to behave as an inline item when it's interacting with its neighbors. The inner type, block, creates a Block Formatting Context and imposes block level rules on its children.

Creating a BFC for its children allows them to have vertical padding and margins. In the example below:

<div>
  Some very important text here. This should be a long one so that we can have multiple lines to see what is going on with vertical padding and margin. Then a
 <span class="with-vertical-pm">span with a dummy text. This span is an inline-block element.
  <div class="floated">
    A section with floated content. But this is contained oddly within a span.
  </div>
 </span>
</div>

.with-vertical-pm {
  display: inline-block;
  margin: 20px;
  padding: 20px;
  color: orange;
  border: 1px solid blue;
}

.floated {
  float: left;
  width: 200px;
  height: 100px;
  background-color: skyblue;
}

the <span> is no longer an inline element, rather an inline-block element. This gives it the flexibility of having a vertical padding and margin.

We can see the behavior this this codepen pen.

Note how the floated div with class .floated is contained within the borders of the <span> element because display: inline-block; creates a BFC which contains a float by default.

Notice also, thanks to the outer inline display, how the <span> element acts as an inline element with respect to the text nodes in the parent div.

---

References

1. The display Property
2. Display

Comments

[𝐁𝐚𝐛𝐢 ✨]

Nice article!

The outer display value of inline essentially tells the item to behave as an inline item when it's interacting with its neighbors. The inner type, block, creates a Block Formatting Context and imposes block level rules on its children.

Thanks for this.

---

I noticed your code snippets have no color. You coulld add the code language to the back ticks to beautify the snippets

You coud also embed your codepen

You could check more details here editor's guide