Display & Visibility
The display property decides how an element generates boxes — as a block, inline, a flex or grid container, or not at all. Related properties control whether something is visible, how see-through it is, and whether it's hidden from assistive technology.
block, inline and inline-block
| Value | New line? | Width/height? | Default for |
|---|---|---|---|
block | Yes, full width | Yes | div, p, h1, section |
inline | No | No | span, a, strong |
inline-block | No | Yes | button, input (behave similarly) |
Layout display values
display: flex and display: grid change how an element lays out its children; the element itself still behaves like a block. inline-flex and inline-grid do the same but sit inline. Lessons 27–30 cover them in depth.
Other display values
| Value | Use |
|---|---|
none | Remove the element completely |
contents | The element's box disappears; its children behave as if they were its parent's children — handy for layout wrappers |
flow-root | A block that contains its floats and margins (lesson 26) |
list-item | A block with a list marker |
table, table-cell, … | Table-like layout for non-table elements (rarely needed now) |
Hiding things: four approaches
| Method | Takes space | Clickable/focusable | Read by screen readers |
|---|---|---|---|
display: none | No | No | No |
visibility: hidden | Yes | No | No |
opacity: 0 | Yes | Yes | Yes |
| "Visually hidden" class | No | Yes | Yes |
HTML hidden attribute | No | No | No |
Visually hidden: for screen readers only
Use this utility for labels and context that sighted users get from the visual design. Never use display: none for text meant for screen readers — it hides it from them too.
Animating visibility
display can't be smoothly animated, so fading something in and out traditionally used opacity plus visibility. Modern browsers can now transition display itself with transition-behavior: allow-discrete and the @starting-style rule (lesson 37).
content-visibility for performance
.long-article section {
content-visibility: auto;
contain-intrinsic-size: auto 600px;
}
content-visibility: auto lets the browser skip rendering sections that are off-screen until they're scrolled into view — a big speed boost for long pages. contain-intrinsic-size gives a placeholder height so the scrollbar doesn't jump.