Display
display determines how an element generates boxes and participates in layout. It controls whether something behaves like a block, inline, flex container, grid container, and more.
Overview
display determines how an element generates boxes and participates in layout. It controls whether something behaves like a block, inline, flex container, grid container, and more.
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 | |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Implementation note
- Chrome 65 stopped creating layout objects for elements inside an `<iframe>` with `display:none` applied.
Notes 1 item(s)
Implementation note
- Chrome Android 65 stopped creating layout objects for elements inside an `<iframe>` with `display:none` applied.
Syntax
CSS
.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.
Related links
Powered by web-features