Inline and block: CSS boxes and HTML content are different

Inline boxes participate in a line of text. Block boxes normally form separate blocks in normal flow. These are CSS layout behaviors; modern HTML describes content using categories such as phrasing and flow content rather than a universal inline/block validity rule.

Compare three display choices

Each span has identical HTML. Inline participates in the sentence; block starts a separate block; inline-block stays in the line while accepting the demonstrated width.

<p>Before <span class="sample inline">inline</span> after.</p>
<p>Before <span class="sample block">block</span> after.</p>
<p>Before <span class="sample inline-block">inline-block</span> after.</p>

.sample {
  background: #dbeafe;
  padding: 0.25rem;
  width: 8rem;
}
.inline {
  display: inline;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}

What dimensions work?

A non-replaced inline box does not use width/height like a block box. Its text can wrap across line boxes; padding and borders paint, but vertical padding does not necessarily enlarge surrounding line spacing in the way expected from block layout. Inline-block is an atomic inline-level box with its own inner formatting context and usable dimensions.

A block with width:auto often fills available inline space in normal flow. It does not always fill the entire screen: containing blocks, explicit sizing, flex/grid layout, floats, and positioning affect that result.

Keep semantics independent

Span has no special meaning, strong conveys importance, and a with href provides a link, even if CSS changes their display. Changing a div to display:inline does not make it valid as phrasing content inside p. Changing a span to display:block does not give it a section heading or landmark role.

Choose the HTML element for meaning and valid placement, then choose its layout. Inspect how it behaves as a flex/grid item before attributing every size change to display alone.

Learn display, span, div, and semantic HTML.

Sources

Reference 1 Reference 2 Reference 3 provide the technical details and current compatibility information.