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 margin
s 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
Top comments (1)
Nice article!
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