display
The display property sets whether an element is treated as block, inline, flex, grid, or removed from layout.
Syntax
display: block | inline | inline-block | flex | grid | none | contents;
Examples
.menu { display: flex; gap: 1rem; }
.hidden { display: none; }
.badge { display: inline-block; padding: 0.25rem 0.5rem; }
Output
Lays out .menu items in a row with spacing, removes .hidden from layout, and renders .badge as an inline pill.
Notes
display:none removes the element from layout and the accessibility tree. display:contents makes a box vanish while keeping its children in flow. flex and grid establish formatting contexts for their direct children.
Browser & runtime support
| Environment | Since version |
|---|---|
| chrome | 1.0 |
| firefox | 1.0 |
| safari | 1.0 |
| edge | 12 |