CSS <display-box> Data Type

The CSS <display-box> data type represents keywords that control whether an element generates a principal box and whether its descendants participate in layout. It is used as part of the value syntax for the display property.

Syntax

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

<display-box> = contents | none

<display-box> Values

Value	Description
`contents`	The element does not generate its own principal box, but its child elements and text continue to participate in layout.
`none`	The element and its descendants generate no boxes and do not participate in layout.

The contents Value

When display: contents is applied, the element's principal box is removed from the box tree while its contents remain. For layout purposes, the element's children behave as though they were direct children of the element's parent.

.wrapper {
  display: contents;
}

The element remains in the document tree even though its principal box is not generated. Some elements have special box-generation behavior, so the effect of contents can depend on the type of element to which it is applied.

The none Value

When display: none is applied, the element and its descendants generate no boxes. The hidden content does not occupy space in the page layout.

.hidden {
  display: none;
}

This differs from display: contents, which removes the element's own principal box while allowing its contents to continue participating in layout.

<display-box> Example

The following example shows how contents removes a wrapper's box while preserving its child elements:

.wrapper {
  display: contents;
}
.wrapper span {
  padding: 8px 12px;
  background-color: #0088cc;
  color: #fff;
}

Browser Result

Item 1 Item 2 Item 3

The wrapper itself does not generate a principal box, so the three <span> elements participate directly in the flex layout created by the outer container.

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

display

Specifications

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

CSS <display-box> Data Type