This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for the proper prefixes to use in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the spec changes.
Summary
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.
Initial value | inline-level |
---|---|
Applies to | all elements |
Inherited | no |
Media | all |
Computed value | as specified |
Animatable | no |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
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
andtable-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
andruby-text
are layout-specific leaf types;ruby-base-container
andruby-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 betable-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, atable-caption
box must have atable
parent, but can establish any kind of formatting context for its children.
Formal syntax
block-level | inline-level | run-in | contents | none | table-row-group | table-header-group | table-footer-group | table-row | table-cell | table-column-group | table-column | table-caption | ruby-base | ruby-text | ruby-base-container | ruby-text-container
Specifications
Specification | Status | Comment |
---|---|---|
CSS Display Module Level 3 The definition of 'display-outside' in that specification. |
Working Draft | Initial definition |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | Not supported | Not supported | Not supported | Not supported | Not supported |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | Not supported | Not supported | Not supported | Not supported | Not supported |
Document Tags and Contributors
Tags:
Contributors to this page:
Sebastianz,
teoli
Last updated by:
Sebastianz,