Menu Samaritan's Purse

DISPLAY

The display property defines an element's display type.

SYNTAX

CSS

display: value;

JS

object.style.display = "value";

VALUES

<'display'> = [ <display-outside> || <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy>
<display-outside> = block | inline | run-in
block

Generates a box that is block-level when placed in flow layout.

inline

Generates a box that is inline-level when placed in flow layout.

run-in

Generates an run-in box, which is a type of inline-level box with special behavior that attempts to merge it into a subsequent block container.

<display-inside> = flow | flow-root | table | flex | grid | ruby
flow

Lays out its contents using flow layout.

flow-root

Generates a block container box and lays out its contents using flow layout.

table

Generates a principal table wrapper box that establishes a block formatting context and which contains an additionally-generated table grid box that establishes a table formatting context.

flex

Generates a principal flex container box and establishes a flex formatting context.

grid

Generates a principal grid container box and establishes a grid formatting context.

ruby

Generates a ruby container box and establishes a ruby formatting context in addition to integrating its base-level contents into its parent formatting context if it is inline or generating a wrapper box of the appropriate outer display type if it is not inline.

<display-listitem> = <display-outside>? && [ flow | flow-root ]? && list-item
<display-outside> = block | inline | run-in
block

Generates a box that is block-level when placed in flow layout.

inline

Generates a box that is inline-level when placed in flow layout.

run-in

Generates an run-in box, which is a type of inline-level box with special behavior that attempts to merge it into a subsequent block container.

flow

Lays out its contents using flow layout.

flow-root

Generates a block container box and lays out its contents using flow layout.

list-item

Generates a ::marker pseudo-element with the content specified by its list-style properties together with a principal box of the specified type for its own contents.

<display-internal> = 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
table-row-group

Behaves as a tbody element.

table-header-group

Behaves as a thead element.

table-footer-group

Behaves as a tfoot element.

table-row

Behaves as a tr element.

table-cell

Behaves as a td element.

table-column-group

Behaves as a colgroup element.

table-column

Behaves as a col element.

table-caption

Behaves as a caption element.

ruby-base

Behaves as a rb element.

ruby-text

Behaves as a rt element.

ruby-base-container

Behaves as a rbc element.

ruby-text-container

Behaves as a rtc element.

<display-box> = contents | none
contents

Does not generate any boxes itself, but its children and pseudo-elements still generate boxes and text runs as normal.

none

Does not generate boxes or text runs.

<display-legacy> = inline-block | inline-table | inline-flex | inline-grid
inline-block

Behaves as inline flow-root.

inline-table

Behaves as inline table.

inline-flex

Behaves as inline flex.

inline-grid

Behaves as inline grid.

INITIAL

inline

EXAMPLES

DISPLAY-BOX | CONTENTS

DISPLAY-BOX | NONE

DISPLAY-INSIDE | FLEX

DISPLAY-INSIDE | FLOW

DISPLAY-INSIDE | FLOW-ROOT

DISPLAY-INSIDE | GRID

DISPLAY-INSIDE | RUBY

DISPLAY-INSIDE | TABLE

DISPLAY-INTERNAL | RUBY-BASE

DISPLAY-INTERNAL | RUBY-BASE-CONTAINER

DISPLAY-INTERNAL | RUBY-TEXT

DISPLAY-INTERNAL | RUBY-TEXT-CONTAINER

DISPLAY-INTERNAL | TABLE-CAPTION

DISPLAY-INTERNAL | TABLE-CELL

DISPLAY-INTERNAL | TABLE-COLUMN

DISPLAY-INTERNAL | TABLE-COLUMN-GROUP

DISPLAY-INTERNAL | TABLE-FOOTER-GROUP

DISPLAY-INTERNAL | TABLE-HEADER-GROUP

DISPLAY-INTERNAL | TABLE-ROW

DISPLAY-INTERNAL | TABLE-ROW-GROUP

DISPLAY-LEGACY | INLINE-BLOCK

DISPLAY-LEGACY | INLINE-FLEX

DISPLAY-LEGACY | INLINE-GRID

DISPLAY-LEGACY | INLINE-TABLE

DISPLAY-LISTITEM | LIST-ITEM

DISPLAY-OUTSIDE | BLOCK

DISPLAY-OUTSIDE | INLINE

DISPLAY-OUTSIDE | RUN-IN

JS | DISPLAY-BOX

JS | DISPLAY-INSIDE

JS | DISPLAY-INTERNAL | RUBY

JS | DISPLAY-INTERNAL | TABLE

JS | DISPLAY-LEGACY

JS | DISPLAY-LISTITEM

JS | DISPLAY-OUTSIDE

World Wide Web Consortium (W3C)