Display Property
Last updated: 2026-09-13
display Display Property
The display property defines how an element is presented in the page, whether it behaves as a block-level element, an inline element, or uses modern layout models such as Flex or Grid. It is one of the most fundamental and powerful properties in CSS layout, capable of changing almost any element's behavior in the document flow.
| Category | |
|---|---|
| Initial Value | inline |
| Inherited | No |
| Applies To | all |
| Animation Type | discrete |
| CSS Version | CSS1 |
| Status | Standard |
📝 Syntax
display: block | inline | inline-block | flex | grid | none | table | table-row | table-cell | contents | flow | flow-root | list-item;⚙️ Values
| Value | Type | Description |
|---|---|---|
block | inline | inline-block | flex | grid | none | table | table-row | table-cell | Keyword | Predefined display types. |
contents | flow | flow-root | list-item | Keyword | Other display types. |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| display | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Supported in all major browsers | |||||
Tip： display:none removes an element from the document flow completely, taking no space and making it inaccessible to screen readers. If you only want to hide it visually while keeping its space, use visibility:hidden.
Important： On inline elements, width, height, and top/bottom margins have no effect. If you need horizontal layout with settable dimensions, use inline-block or flex.
❓ FAQ
QWhat's the difference between inline, inline-block, and block?
Ainline elements flow horizontally, cannot take width, height, or vertical margins, and are sized by content; vertical padding affects visuals but not layout. block elements take a full line and accept width, height, and all margins. inline-block combines both: it flows horizontally like inline while accepting dimensions and margins like block. Use inline-block when you need horizontal arrangement with controlled sizing.
QWhen should I use display:flex vs display:grid?
Aflex is for one-dimensional layouts with a single main axis, such as navbars, lists, centering, and two-column rows; children line up along the axis with automatic alignment and flexing. grid is for two-dimensional layouts where rows and columns are controlled together, such as full-page skeletons, card grids, and complex alignments. A simple rule: one row or column means flex; a grid-like pattern means grid.
QWhat's the difference between display:none and visibility:hidden?
Adisplay:none removes an element and its subtree from rendering entirely, taking no space, not being read by screen readers, and not being interactive. visibility:hidden only hides it visually; it keeps its space and is still read by screen readers. JavaScript event listeners on a display:none element still exist but never fire. For transitionable show and hide effects, visibility combined with opacity is a better fit.
QWhy doesn't width work on inline elements?
ABecause inline elements like span and a do not generate line boxes, so the browser ignores their width, height, and vertical margins. To let an inline element accept dimensions, change it to display:inline-block or block, or put it in a flex or grid container, where it becomes a flex or grid item and width applies normally. This also enables vertical padding to push the surrounding layout, which plain inline never does.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
Flexbox Layout
Learn one-dimensional layout with flex.
Grid Layout
Learn two-dimensional layout with grid.
