What’s the effect of display: block on inline elements like <span>?
Effect of display: block on Inline Elements
By default, elements like <span> are inline, meaning they flow within a line of text and only take up as much width as their content. Setting display: block changes their behavior to block-level.
- 1
The
<span>will start on a new line, breaking the text flow. - 2
It will stretch to fill the full width of its parent container by default.
- 3
Width, height, margin, and padding properties can now be applied in all directions.
- 4
It behaves like a block element, stacking vertically with other block elements.
In this example, the span no longer flows inline with the surrounding text. Instead, it appears on its own line and takes up the full width, demonstrating block-level behavior.
- 1
Use
display: blockon inline elements when you want them to behave like containers or structural elements. - 2
Remember that changing inline elements to block can disrupt text flow, so use it thoughtfully.
- 3
Combine with CSS layout techniques like Flexbox or Grid for advanced designs.