Web.QHMIT.com

CSS display

Editor Preview

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 or run-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 to block.

Example:

<display-internal>

Some layout models, such as table and ruby, 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 or initial, 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