CSS 2 used a single-keyword syntax for the display
property, requiring separate keywords for block-level and inline-level variants of the same layout mode. This page details those values.
Syntax
Valid
values:
inline-block
-
The element generates a block element box that will be flowed with surrounding content as if it were a single inline box (behaving much like a replaced element would).
It is equivalent to
inline flow-root
. inline-table
-
The
inline-table
value does not have a direct mapping in HTML. It behaves like an HTMLelement, but as an inline box, rather than a block-level box. Inside the table box is a block-level context.
It is equivalent to
inline table
.inline-flex
The element behaves like an inline element and lays out its content according to the flexbox model.
It is equivalent to
inline flex
.inline-grid
The element behaves like an inline element and lays out its content according to the grid model.
It is equivalent to
inline grid
.Formal syntax
Examples
In the below example, we are creating an inline flex container with the legacy keyword inline-flex.
HTML
htmlFlex ItemFlex ItemCSS
css.container { display: inline-flex; }
Result
In the new syntax the inline flex container would be created using two values, inline for the outer display type, and flex for the inner display type.
css.container { display: inline flex; }
Specifications
Specification CSS Display Module Level 3
# typedef-display-legacyBrowser compatibility
css.properties.display.inline-block
css.properties.display.inline-table
css.properties.display.inline-flex
css.properties.display.inline-grid
See also