CSS display
The CSS display
property is used to specify whether an element should be displayed and if so, how it will be displayed.
The display
property specifies an element's display type. Display type refers to how an element generates boxes. There are two basic display types:
- Inner display type
- Defines (if it's a non-replaced element) the kind of formatting context it generates, which dictates how its descendant boxes are laid out.
- Outer display type
- Dictates how the box participates in its parent formatting context.
Code Examples
Possible Values
CSS3 has brought a significant change to the values available for the display
property. Below are the values available in CSS2, then below that are the values available in CSS3, along with an explanation of each value.
CSS2
In CSS2, the display
property can accept any of the following values:
CSS2
CSS3 expands on that list. In CSS3, the display
property can accept any of the following values:
And each of these CSS3 values are defined as follows:
Below is a more detailed explanation of the values defined in CSS3.
- <display-outside>
-
These keywords specify the element's outer display type, which is essentially its role in flow layout.
block
- The element generates a block-level box.
inline
- The element generates an inline-level box.
run-in
- The element generates a run-in box. Run-in elements act like inlines or blocks, depending on the surrounding elements.
- <display-inside>
-
These keywords specify the element's inner display type, which defines the type of formatting context that lays out its contents (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
orrun-in
, and it is participating in a block or inline formatting context, then it generates an inline box. Otherwise it generates a block container box.Depending on the value of other properties (such as position, float, or overflow) and whether it is itself participating in a block or inline formatting context, it either establishes a new block formatting context for its contents or integrates its contents into its parent formatting context.
flow-root
-
The element generates a block container box, and lays out its contents using flow layout. It always establishes a new block formatting context for its contents.
table
-
The element generates a principal table wrapper box containing an additionally-generated table box, and establishes a table formatting context.
Basically, the element behaves like a
table
element. flex
-
This is for flex layouts. When you apply
display: flex
to an element, it generates a principal flex container box and establishes a flex formatting context.In the flex layout model, the children of a flex container can be laid out in any direction, and can "flex" their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent.
See the
flex
property for an example. grid
-
The element generates a principal grid container box, and establishes a grid formatting context.
In the grid layout model, the children of a grid container can be positioned into arbitrary slots in a predefined flexible or fixed-size layout grid. Unlike Flexible Box Layout, which is single-axis–oriented, Grid Layout is optimized for 2-dimensional layouts: those in which alignment of content is desired in both dimensions.
ruby
-
The element generates a principal ruby container box, and establishes a ruby formatting context.
Ruby are short runs of text alongside the base text. They are typically used in East Asian documents to indicate pronunciation or to provide a short annotation.
See the
ruby
element for an example of a ruby usage.
- <display-listitem>
-
This is where you provide the
list-item
keyword, along with one or two optional keywords to specify the <display-inside> and <display-outside> display.The
list-item
keyword causes the element to generate a::marker
pseudo-element box with the content specified by its list-style properties together with a principal box of the specified type for its own contents.If no <display-inside> value is specified, the principal box's inner display type defaults to
flow
. If no <display-outside> value is specified, the principal box's outer display type defaults toblock
.Example:
- <display-internal>
-
Some layout models, such as
table
andruby
, have a complex internal structure, with several different roles that their children and descendants can fill. Each <display-internal> keyword only has meaning within its respective layout mode.Unless otherwise specified, both the inner display type and the outer display type of elements using these values are set to the given keyword.
The <display-internal> keywords are defined as follows:
table-row-group
- The element behaves like a
tbody
element. table-header-group
- The element behaves like a
thead
element. table-footer-group
- The element behaves like a
tfoot
element. table-row
- The element behaves like a
tr
element. table-row-group
- The element behaves like a
tbody
element. table-cell
- The element behaves like a
td
element. table-column-group
- The element behaves like a
colgroup
element. table-column
- The element behaves like a
col
element. table-caption
- The element behaves like a
caption
element. table-row-group
- The element behaves like a
tbody
element. ruby-base
- The element behaves like an
rb
element. ruby-text
- The element behaves like an
rt
element. ruby-base-container
- The element behaves like an XHTML
rbc
element. ruby-text-container
- The element behaves like an
rtc
element.
- <display-box>
-
These keywords determine whether or not the element will generate any boxes at all.
contents
-
The element itself does not generate any boxes, but its children and pseudo-elements still generate boxes as normal.
none
-
The element and its descendants generates no boxes. The element and its descendants are not displayed, and they take up no space in the page layout (it's as if they don't exist).
- <display-legacy>
-
CSS2 used a single-keyword syntax for display, requiring separate keywords for block-level and inline-level variants of the same layout mode. CSS3 has changed this, so that multiple keywords could be used to achieve the same effect.
However, the CSS2 syntax is still valid in CSS3, and the CSS2 keywords are referred to as <display-legacy> keywords.
These keywords are:
inline-block
- Behaves as
inline flow-root
. inline-table
- Behaves as
inline table
. inline-flex
- Behaves as
inline flex
. inline-grid
- Behaves as
inline grid
.
In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:
initial
- Represents the value specified as the property's initial value.
inherit
- Represents the computed value of the property on the element's parent.
unset
- This value acts as either
inherit
orinitial
, depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.
General Information
- Initial Value
inline
- Applies To
- All elements
- Inherited?
- No
- Media
- All
Official Specifications
- The
display
property is defined in CSS Display Module Level 3 (W3C Working Draft). - The
display
property is defined in Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification (W3C Recommendation 07 June 2011). - The
display
property was initially defined in Cascading Style Sheets, level 1 (W3C Recommendation 17 Dec 1996).