CSS <display-outside> Data Type

The CSS <display-outside> data type defines an element's outer display type, which determines how the element's principal box participates in the flow layout of its parent. It is used as part of the value syntax for the display property.

Syntax

The <display-outside> data type accepts two keyword values:

<display-outside> = block | inline

<display-outside> Values

Value	Description
`block`	Generates a block-level principal box that participates in block layout within its parent.
`inline`	Generates an inline-level principal box that participates in inline layout within its parent.

Outer and Inner Display Types

The display property can specify an outer display type together with an inner display type. The outer value determines how the element participates in its parent's flow layout, while the inner value determines how the element lays out its own contents.

For example, block flex combines a block outer display type with a flex inner display type:

.example {
  display: block flex;
}

The element behaves as a block-level box in the surrounding layout, while its children are laid out as flex items.

Similarly, inline grid creates an inline-level box whose children participate in grid layout:

.example {
  display: inline grid;
}

<display-outside> Example

The following example compares the outer behavior of block and inline elements:

.block-example {
  display: block;
}
.inline-example {
  display: inline;
}

Browser Result

block

Block 1 Block 2

inline

Inline 1 Inline 2

The block-level boxes occupy separate lines, while the inline-level boxes participate in the same line of inline content when sufficient space is available.

The <display-outside> data type is used by the display property:

display

Specifications

The <display-outside> data type is defined in the CSS Display Module Level 3 .

CSS <display-outside> Data Type