Before reaching for Flexbox or Grid, every element already has a default layout behavior determined by its display value.
display | Takes full width available? | Respects width/height? | Sits next to siblings? |
|---|---|---|---|
block | Yes — starts on its own line | Yes | No — stacks vertically |
inline | No — only as wide as its content | No — width/height/vertical margin are ignored | Yes — flows with surrounding text |
inline-block | No — only as wide as its content | Yes | Yes |
span { display: inline; } /* the default for <span>, <a>, <strong>, ... */
div { display: block; } /* the default for <div>, <p>, <section>, ... */
img { display: inline-block; } /* the default for replaced elements like <img> */
Setting width/height on an inline element (without changing display) silently does nothing — a common source of "I set a width on my <span> and nothing happened" confusion. inline-block exists exactly for this case: elements that should flow like text but also respect a set size, like a row of badge-style tags.