Every element has a default display behavior that controls how it flows in the layout.
<div>, <p>, <h1>, <section>, <ul>.<span>, <a>, <strong>, <em>.<p>This is a <strong>bold</strong> word inside a paragraph.</p>
<!-- <strong> stays inline; the two <div>s below stack vertically -->
<div>Block one</div>
<div>Block two</div>
span { width: 200px; height: 50px; } /* ❌ ignored — span is inline */
Setting width/height on an inline element does nothing. The fix is to change its display:
span { display: inline-block; width: 200px; } /* ✅ flows inline BUT respects size */
inline-block sits in the text flow (side by side) and honors width/height/margins — perfect for nav items, badges, or buttons laid out in a row.
block → new line, full width, sizeable
inline → in-line, content width, NOT sizeable (vertically)
inline-block → in-line, content flow, sizeable
Understanding default display explains why your <span> won't take a height, why <div>s stack, and when to switch to inline-block, flex, or grid.
It's the foundation of how elements arrange before you apply any layout system.