CSS - display-outside

Syntax  

/* Keyword values */
display-outside: block-level;
display-outside: inline-level;
display-outside: run-in;
display-outside: contents;
display-outside: none;
display-outside: table-row-group;
display-outside: table-header-group;
display-outside: table-footer-group;
display-outside: table-row;
display-outside: table-cell;
display-outside: table-column-group;
display-outside: table-column;
display-outside: table-caption;
display-outside: ruby-base;
display-outside: ruby-text;
display-outside: ruby-base-container;
display-outside: ruby-text-container;

/* Global values */
display-outside: inherit;
display-outside: initial;
display-outside: unset;

Values

block-level

The element generates a block-level box, and participates in a block formatting context. Other formatting contexts, such as flex formatting contexts, may also work with block-level elements.

inline-level

The element generates an inline-level box, and participates in an inline formatting context.

run-in

The element generates a run-in box. Run-in elements act like inlines or blocks, depending on the surrounding elements.

contents

The element lays out its contents using flex layout.

none

The element generates no boxes, and does not participate in any formatting context.

table-row-group, table-header-group, table-footer-group, table-row, table-cell, table-column-group, table-column, table-caption

The element is an internal table element, and participates in a table layout context.

table-cell and table-caption are layout-specific leaf types; the rest are layout-specific internal types.

ruby-base, ruby-text, ruby-base-container, ruby-text-container

The element is an internal ruby element, and participates in a ruby layout context.

ruby-base and ruby-text are layout-specific leaf types; ruby-base-container and ruby-text-container are layout-specific internal types.

layout-specific internal types

These display types require their parent and children to be of particular display types. For example, a table-row box requires its parent to be a table row group box and its children to be table-cell boxes.

layout-specific leaf types

These display types require their parent to be of a particular display type, but can accept any display-inside value. For example, a table-caption box must have a table parent, but can establish any kind of formatting context for its children.

Formal syntax

block-level <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> inline-level <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> run-in <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> contents <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> none <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> table-row-group <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> table-header-group <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> table-footer-group <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> table-row <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> table-cell <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> table-column-group <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> table-column <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> table-caption <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> ruby-base <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> ruby-text <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> ruby-base-container <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> ruby-text-container

Description  

The display-outside CSS property specifies the outer display type of the box generated by an element, dictating how the element participates in its parent formatting context.

Browser Compatibility  

Specifications  

License