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.

style > appearance > displayBasic behavior

🔎