What's the difference between `block`, `inline`, and `inline-block`?
TL;DR
A block box participates in block layout and, with width: auto, normally fills the available inline space. An inline box participates inside a line and can wrap across lines; width and height do not apply to ordinary non-replaced inline boxes. An inline-block is a single atomic inline-level box whose dimensions and all box-model sides can be controlled. For groups of interface controls, Flexbox is often clearer than relying on inline-block whitespace and baseline alignment.
What's the difference between block, inline, and inline-block?
Behavior in normal flow
| Behavior | block | inline | inline-block |
|---|---|---|---|
| Outer participation | Block-level | Inline-level and can fragment across lines | Atomic inline-level box |
Default width: auto behavior | Fills available inline space in normal block flow | Fits inline content | Shrink-to-fit |
width and height on a non-replaced element | Apply | Normally do not apply | Apply |
| Line alignment | Not controlled by vertical-align in block flow | Participates in baseline and vertical-align behavior | Participates as one box in baseline and vertical-align behavior |
| Typical use | Sections and vertically stacked regions | Text-level phrasing content | A sized box that must sit in a text line |
“Block” and “inline” refer to logical axes, so they continue to make sense in vertical writing modes; they do not inherently mean horizontal or vertical pixels.
Box-model details
Inline non-replaced content such as a span can split into multiple boxes when it wraps. Inline-start and inline-end margins, padding, and borders affect spacing. Block-axis padding and borders are painted, but they do not expand the line box in the same way a block or inline-block box does and can overlap adjacent lines. Block-axis margins on such an inline box have no effect.
Replaced inline elements such as img are an important exception: they have intrinsic dimensions and accept width and height even with display: inline.
An inline-block behaves as one indivisible item in its surrounding line while laying out its own contents in a flow-root formatting context. It is useful for a compact badge that needs padding and a minimum size:
.status-badge {display: inline-block;min-inline-size: 4rem;padding: 0.25rem 0.5rem;border-radius: 999px;text-align: center;vertical-align: middle;}
Practical layout choice
Whitespace between inline-block elements in HTML is rendered as text spacing, and baseline alignment can produce an unexpected gap below image-like boxes. Removing source whitespace or changing font size only treats symptoms. When laying out a toolbar, navigation, or button group, use Flexbox with an explicit gap; reserve inline-block for boxes that genuinely belong in inline formatting.
Changing an element's CSS display type does not change its HTML semantics. Choose button, a, headings, and structural elements for meaning first, then select the layout behavior.