Two Display Behaviors
Every HTML element has a default display behavior: block-level or inline. This determines whether it starts on a new line and how much space it takes up.
Block vs Inline
| Block-Level | Inline | |
|---|---|---|
| Starts on new line | Yes | No |
| Takes full width by default | Yes | No, only as wide as content |
| Can set width/height | Yes | No (without changing display) |
| Examples | <div>, <p>, <h1>–<h6>, <ul>, <section> | <span>, <a>, <strong>, <em>, <img> |
Block-Level Example
<div>First block</div>
<div>Second block</div>
<!-- Each div appears on its own line -->Inline Example
<span>First</span><span>Second</span>
<!-- Both spans appear on the same line, side by side -->img is a Special Case
<img> is inline-level by default but, unlike text-based inline elements, it does accept width and height because it is treated as a replaced element.
CSS Can Change display
The default block/inline behavior is just a starting point — CSS’s display property (block, inline, inline-block, flex, grid, none) can override it for any element.
Invalid Nesting
Block-level elements generally should not be placed inside inline elements — for example, putting a <div> inside a <span> is invalid and can cause unpredictable rendering.
Best Practice
Choose elements based on their semantic meaning first; use CSS display properties afterward if you need different visual behavior than the default.