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 <display-legacy>
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 toinline flow-root
. inline-table
- The
inline-table
value does not have a direct mapping in HTML. It behaves like an HTML<table>
element, but as an inline box, rather than a block-level box. Inside the table box is a block-level context.
It is equivalent toinline table
. inline-flex
- The element behaves like an inline element and lays out its content according to the flexbox model.
It is equivalent toinline flex
. inline-grid
- The element behaves like an inline element and lays out its content according to the grid model.
It is equivalent toinline grid
.
Examples
In the below example, we are creating an inline flex container with the legacy keyword inline-flex.
HTML
<div class="container"> <div>Flex Item</div> <div>Flex Item</div> </div> Not a flex item
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.
.container { display: inline flex; }
Specifications
Specification | Status |
---|---|
CSS Display Module Level 3 The definition of 'display-legacy' in that specification. |
Candidate Recommendation |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Support of inline-block
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
inline-block | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | IE
Full support
8
| Opera Full support 7 | Safari Full support 1 | WebView Android Full support ≤37 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 14 | Safari iOS Full support 1 | Samsung Internet Android Full support 1.0 |
Legend
- Full support
- Full support
- See implementation notes.
- See implementation notes.
Support of inline-table
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
inline-table | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 3 | IE Full support 8 | Opera Full support 7 | Safari Full support 1 | WebView Android Full support ≤37 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 14 | Safari iOS Full support 1 | Samsung Internet Android Full support 1.0 |
Legend
- Full support
- Full support
Support of inline-flex
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
inline-flex | Chrome
Full support
29
| Edge Full support 12 | Firefox
Full support
20
| IE
Full support
11
| Opera
Full support
16
| Safari
Full support
9
| WebView Android
Full support
4.4
| Chrome Android
Full support
29
| Firefox Android
Full support
20
| Opera Android
Full support
16
| Safari iOS
Full support
9
| Samsung Internet Android
Full support
2.0
|
Legend
- Full support
- Full support
- See implementation notes.
- See implementation notes.
- User must explicitly enable this feature.
- User must explicitly enable this feature.
- Uses a non-standard name.
- Uses a non-standard name.
- Requires a vendor prefix or different name for use.
- Requires a vendor prefix or different name for use.
Support of inline-grid
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
inline-grid | Chrome Full support 57 | Edge
Full support
16
| Firefox Full support 52 | IE
Partial support
10
| Opera Full support 44 | Safari Full support 10.1 | WebView Android Full support 57 | Chrome Android Full support 57 | Firefox Android Full support 52 | Opera Android Full support 43 | Safari iOS Full support 10.3 | Samsung Internet Android
Full support
6.0
|
Legend
- Full support
- Full support
- Partial support
- Partial support
- See implementation notes.
- See implementation notes.
- Requires a vendor prefix or different name for use.
- Requires a vendor prefix or different name for use.