CSS Display & Visibility
Before Flexbox and Grid comes the property that decides what kind of box an element even is. block, inline, inline-block, none — the display value is the first question of every layout.
1. The three classic values
| Value | Behavior | Width/height respected? |
|---|---|---|
block | Full line, stacks vertically (div, p, h1) | Yes |
inline | Flows within text (span, a, strong) | No — and no vertical margins |
inline-block | Flows inline, but accepts box sizing | Yes |
The classic trap: trying to size a span or add vertical padding to a link and watching nothing happen — inline elements ignore those. Switch to inline-block (or make the parent a flex container) and the box model returns.
2. Hiding: none vs hidden
modal { display: none; } /* gone: takes no space */
.ghost { visibility: hidden; } /* invisible: space kept */
.faded { opacity: 0; } /* invisible but interactive! */display: none removes the element from layout entirely. visibility: hidden leaves its gap behind. opacity: 0 is purely visual — the element still receives clicks, which is a real bug source. Choose deliberately.
3. Try it yourself
The badge (a span) ignores its padding. Make it inline-block so the box model applies, then hide the second card completely with display: none.
4. Quiz — check your understanding
CSS Display & Visibility Quiz
4 questions · pass at 60%Q1. Which display value ignores width, height and vertical margins?
Q2. You need a link to accept padding while flowing in a sentence. Use…
Q3. Which hides an element but preserves its space?
Q4. Why is opacity: 0 risky for hiding interactive elements?
Every lesson quiz you pass (60%+) is saved in your browser and counts toward the CSSmatic Certificate of Completion.