9.2.4 The 'display' property

Chapter 9 - Visual formatting model - 9.2.4 The 'display' property

Go to the relevant page of the specification.

after-content-display-001
:after generated content - display inline
Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element.
after-content-display-002
:after generated content - display block
Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element.
after-content-display-003
:after generated content - display list-item
Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element.
after-content-display-005
:after generated content - display inline-block
Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element.
after-content-display-006
:after generated content - display table
Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element.
after-content-display-007
:after generated content - display inline-table
Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element.
after-content-display-008
:after generated content - display table-row-group
Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element.
after-content-display-009
:after generated content - display table-header-group
Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element.
after-content-display-010
:after generated content - display table-footer-group
Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element.
after-content-display-011
:after generated content - display table-row
Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element.
after-content-display-014
:after generated content - display table-cell
Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element.
after-content-display-015
:after generated content - display table-caption
Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element.
after-content-display-016
:after generated content - display none
Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element.
after-content-display-017
:after generated content - display inherit
Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element.
before-content-display-001
:before generated content - display inline
Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element.
before-content-display-002
:before generated content - display block
Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element.
before-content-display-003
:before generated content - display list-item
Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element.
before-content-display-005
:before generated content - display inline-block
Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element.
before-content-display-006
:before generated content - display table
Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element.
before-content-display-007
:before generated content - display inline-table
Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element.
before-content-display-008
:before generated content - display table-row-group
Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element.
before-content-display-009
:before generated content - display table-header-group
Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element.
before-content-display-010
:before generated content - display table-footer-group
Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element.
before-content-display-011
:before generated content - display table-row
Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element.
before-content-display-014
:before generated content - display table-cell
Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element.
before-content-display-015
:before generated content - display table-caption
Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element.
before-content-display-016
:before generated content - display none
Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element.
before-content-display-017
:before generated content - display inherit
Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element.
block-in-inline-003
Blocks within inlines: Simple
When an inline box contains a block box, the inline box is broken around the box and its pieces, if empty, will not show any background.
block-in-inline-004 (interact)
Blocks within inlines: Simple with :hover
A block that splits an inline still inherits from the inline, even in dynamic cases.
block-in-inline-005 (dom, interact)
Blocks within inlines: Simple with dynamic class changes
block-in-inline-006 (dom, interact)
Blocks within inlines: Simple with dynamic class changes
block-in-inline-007
Blocks within inlines: Simple
When an inline box contains block boxes, the inline box is broken around the blocks.
block-in-inline-008
Blocks within inlines: Relative positioning
c561-list-displ-000
display
clear-applies-to-000
Clear on floats after floats with display:none blocks between them
descendant-display-none-001
Descendant elements and 'display: none'
Descendant elements do not get generated when parent is 'display: none'.
descendant-display-override-001
Overriding display none from parent
Descendant elements cannot override the parent's setting of the 'display' property when set to 'none'.
display-001
Display set to 'inline'
The property 'display' set to 'inline' behaves in layout as an inline element.
display-002
Display set to 'block'
The property 'display' set to 'block' behaves in layout as a block.
display-003
Display set to 'list-item'
The property 'display' set to 'list-item' behaves in layout as a list item block.
display-005
Display set to 'inline-block'
The property 'display' set to 'inline-block' is formatted in layout as an inline-level element: it creates a new block formatting context for its descendants but it is laid out, flowed as an inline-level element. An inline-block does not begin on a new line and does not require to begin on a new line.
display-006
Display set to 'table'
The property 'display' set to 'table' behaves in layout as a table.
display-007
Display set to 'inline-table'
The property 'display' set to 'inline-table' behaves in layout as an inline table.
display-008
Display set to 'table-row-group'
The property 'display' set to 'table-row-group' behaves in layout as a table row group.
display-009
Display set to 'table-header-group'
The property 'display' set to 'table-header-group' behaves in layout as a table header group.
display-010
Display set to 'table-footer-group'
The property 'display' set to 'table-footer-group' behaves in layout as a table footer group.
display-011
Display set to 'table-row'
The property 'display' set to 'table-row' behaves in layout as a table row.
display-012
Display set to 'table-column-group'
The property 'display' set to 'table-column-group' behaves in layout as a table column group.
display-013
Display set to 'table-column'
The property 'display' set to 'table-column' behaves in layout as a table column.
display-014
Display set to 'table-cell'
The property 'display' set to 'table-cell' behaves in layout as a table cell.
display-015
Display set to 'table-caption'
The property 'display' set to 'table-caption' behaves in layout as a table caption.
display-016
Display set to 'none'
The property 'display' set to 'none' has no layout.
display-017
Display set to 'inherit'
The property 'display' set to 'inherit' can inherit its layout behavior from a parent container.
display-018
display - sub-table elements with 'display' set to 'inline'
The property 'display' set to 'inline' behaves in layout as an inline element and should generate inline box.
display-applies-to-001
Applying the property 'display' set to 'inline' to the 'a' element
Display set to 'inline' applies the correct rendering behavior for the 'a' element.
display-applies-to-002
Applying the property 'display' set to 'inline' to the 'abbr' element
Display set to 'inline' applies the correct rendering behavior for the 'abbr' element.
display-change-001 (ahem, dom)
Updating layout on display changes
display-initial-001
Display initial value
The initial display value for all elements is 'inline'.
inline-block-000
Test for inline-block
This value causes an element to generate a block box, which itself is flowed as a single inline box, similar to a replaced element. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an inline replaced element. The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.
inline-block-valign-001
Test for vertical alignment on inline-block
This value causes an element to generate a block box, which itself is flowed as a single inline box, similar to a replaced element. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an inline replaced element. The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.
inline-block-valign-002
Test for vertical alignment on inline-block
This value causes an element to generate a block box, which itself is flowed as a single inline box, similar to a replaced element. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an inline replaced element. The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.
root-box-002 (image)
Styling the root element: display:table
HTML elements can be set to other display property values - like sub-table elements just like in this testcase - in order to behave like another element.
root-box-003
Styling the root element: display:none (page should be a big green expanse)