display
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
* Some parts of this feature may have varying levels of support.
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.
Try it
display: block;
display: inline-block;
display: none;
display: flex;
display: grid;
Apply different display values on the dashed orange-bordered
div, which contains three child elements.
Some text A.
Child 1
Child 2
Child 3
Some text B.
.example-container {
width: 100%;
height: 100%;
}
code {
background: #8888;
}
#example-element {
border: 3px dashed orange;
}
.child {
display: inline-block;
padding: 0.5em 1em;
background-color: #ccccff;
border: 1px solid #ababab;
color: black;
}
Syntax
/* precomposed values */
display: block;
display: inline;
display: inline-block;
display: flex;
display: inline-flex;
display: grid;
display: inline-grid;
display: flow-root;
/* box generation */
display: none;
display: contents;
/* multi-keyword syntax */
display: block flex;
display: block flow;
display: block flow-root;
display: block grid;
display: inline flex;
display: inline flow;
display: inline flow-root;
display: inline grid;
/* other values */
display: table;
display: table-row; /* all table elements have an equivalent CSS display value */
display: list-item;
/* Global values */
display: inherit;
display: initial;
display: revert;
display: revert-layer;
display: unset;
The CSS display property is specified using keyword values.
Grouped values
The keyword values can be grouped into six value categories.
Outside
-
These keywords specify the element's outer display type, which is essentially its role in flow layout:
block-
The element generates a block box, generating line breaks both before and after the element when in the normal flow.
inline-
The element generates one or more inline boxes that do not generate line breaks before or after themselves. In normal flow, the next element will be on the same line if there is space.
Note:
When browsers that support multi-keyword syntax encounter a display property that only has an outer value (e.g., display: block or display: inline), the inner value is set to flow (e.g., display: block flow and display: inline flow).
Note:
To be sure layouts work on older browsers, you may use single-value syntax, for example display: inline flex could have the following fallback
.container {
display: inline-flex;
display: inline flex;
}
See Using the multi-keyword syntax with CSS display for more information.
Inside
-
These keywords specify the element's inner display type, which defines the type of formatting context that its contents are laid out in (assuming it is a non-replaced element):
flow-
The element lays out its contents using flow layout (block-and-inline layout).
If its outer display type is
inline, and it is participating in a block or inline formatting context, then it generates an inline box. Otherwise it generates a block box.Depending on the value of other properties (such as
position,float, oroverflow) and whether it is itself participating in a block or inline formatting context, it either establishes a new block formatting context (BFC) for its contents or integrates its contents into its parent formatting context. flow-root-
The element generates a block box that establishes a new block formatting context, defining where the formatting root lies.
table-
These elements behave like HTML