Basic behavior

display

Despite its name, the display property defines the behavior of the element with respect to nearby elements, not its actual appearance.

Property values

This property accepts one or two keyword values. The newer two-property approach expects one value for the "outside" behavior and one for the "inside behavior":

Outside

Values that control how the element behaves with respect to its container:

block	The element is a block box, with line breaks both before and after the element when in the normal flow.
inline	The element does not have line breaks before or after itself, and the the next element will be on the same line.
run-in	Run-in elements make the next element behave as if it were inline, even if it is actually a block element.

Inside

Values that control how the things contained within this element behave:

flow	This element behaves in inline fashion when its container is inline, and behaves in block fashion when its container is block.
flow-root	A root block that establishes a new block formatting context.
table	The element behaves like a <table> element.
flex	The element behaves according to the flexbox model.
grid	The element behaves according to the grid model.
ruby	The element behaves like a <ruby> element.

Inside and Outside

Values for controlling both the "inside" and "outside" behavior:

block flow	The element is a block box, with inside flow behavior.
inline table	The element is inline, and behaves like a <table> element.
flex run-in	The element behaves according to the flexbox model, and has the added "run-in" feature.

Lists

Values for how lists of things should be laid out:

list-item	Behaves like an <li> item
list-item block	Behaves like an <li> item, with outside block behavior.
list-item inline	Behaves like an <li> item, with outside inline behavior.
list-item flow	Behaves like an <li> item, with inside flow behavior.
list-item flow-root	Behaves like an <li> item, with inside flow-root behavior.
list-item block flow	Behaves like an <li> item, with outside block behavior, and inside flow behavior.
list-item block flow-root	Behaves like an <li> item, with outside block behavior, and inside flow-root behavior.
flow list-item block	The element use flow layout, and behaves like an <li> item, with outside block behavior.

Tables

Values for how tables should be laid out:

table-row-group	Behaves like <tbody> elements.
table-header-group	Behaves like <thead> elements.
table-footer-group	Behaves like <tfoot> elements.
table-row	Behaves like <tr> elements.
table-cell	Behaves like <td> elements.
table-column-group	Behaves like <colgroup> elements.
table-column	Behaves like <col> elements.
table-caption	Behaves like <caption> elements.

Furigana

Values for how furigana should behave:

ruby-base	Behaves like <rb> elements.
ruby-text	Behaves like <rt> elements.
ruby-text-container	Behaves like <rtc> elements.

Legacy

CSS2 values for elements that temporarily suspend the normal paragraph-style layout flow:

inline-block	The element is a block element box that will be flowed with surrounding content as if it were a single inline box. The newer syntax for this is `inline flow-root`.
inline-table	The element behaves like a <table> element with surrounding content flowed as a single inline box. The newer syntax for this is `inline table`.
inline-flex	The element behaves according to the flexbox model. The newer syntax for this is `inline flex`.
inline-grid	The element behaves according to the grid model. The newer syntax for this is `inline grid`.

Resets

Resetting the ancestor-implied value:

none	Effectively removes the element and all its subordinates from being displayed at all.
contents	The element and all its subordinates are treated as text, with neither inline nor block behavior.
inherit	The element inherits its value from its parent element.
initial	The element is restored to its standard behavior, as defined by the HTML specification.