Display
The display CSS property sets whether an element is treated as a block or inline box and the layout used for its children, such as flow layout, grid or flex.
Formally, the display property sets an element's inner and outer display types. The outer type sets an element's participation in flow layout; the inner type sets the layout of children. Some values of display are fully defined in their own individual specifications; for example the detail of what happens when display: flex is declared is defined in the CSS Flexible Box Model specification.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 1 | 18 | 1 | |
block | 1 | 12 | 1 | 1 | 18 | 1 |
inline | 1 | 12 | 1 | 1 | 18 | 1 |
inline-block | 1 | 12 | 1 | 1 | 18 | 1 |
none | 1 | 12 | 1 | 1 | 18 | 1 |
none.option is hidden Non-standard Setting `display: none` on an `<option>` element hides it from the dropdown. | 1 | 79 | 1 | | 18 | |
- Chrome 65 stopped creating layout objects for elements inside an `<iframe>` with `display:none` applied.
- Chrome Android 65 stopped creating layout objects for elements inside an `<iframe>` with `display:none` applied.
Syntax
.block { display: block; }
.flex-container { display: flex; }
.grid-container { display: grid; }
.hidden { display: none; }Live demo
Use cases
-
Switching layout roles
Choose the right formatting context for components, containers, and repeated content blocks.
-
Adapting component structure
Move between block, flex, grid, and inline behaviors as component needs change across contexts.
Cautions
- Changing display can affect semantics-adjacent behavior such as list markers, table behavior, or expected box generation.
- display: none removes content from layout and accessibility trees, so use it deliberately.
Accessibility
- If content is visually hidden with display: none, it is also hidden from assistive technology.