Block vs Inline Elements
Two fundamental display behaviors that shape every layout.
1Block & Inline
Block elements (div, p, h1, section) start on a new line and fill the available width. Inline elements (span, a, strong, em) flow within text and only take up the space they need.
<div>Block — full width line</div>
<p>Block paragraph.</p>
<span>Inline</span> sits next to <a href="#">Inline links</a>.2Put the element in context
Block and inline describe layout behavior, not the meaning of an element. CSS can change that behavior, while the HTML content model still matters. A styled span does not become a semantic section merely because it has display: block.
3Practice with a small page
Compare a paragraph and a span inside a simple page. Change their display values and observe the visual layout while keeping the markup. Choose the element by its purpose first, and use display only to express the presentation you need.
Finished reading?
Mark this topic as complete to track progress.