The <display-outside>
keywords specify the element’s outer display
type, which is essentially its role in flow layout. These keywords are used as values of the display
property, and can be used for legacy purposes as a single keyword, or as defined in the Level 3 specification alongside a value from the <display-inside>
keywords.
The <display-outside>
value is defined using a keyword from the list below:
block
inline
run-in
display: run-in
box is a block box, the run-in
box becomes the first inline box of the block box that follows it. Note: Browsers that support the two value syntax, on finding the outer value only, such as when display: block
or display: inline
is specified, will set the inner value to flow
. This will result in expected behavior; for example if you specify an element to be block, you would expect that the children of that element would participate in block and inline normal flow layout.
Syntax not found in DB!
In the following example, span elements (normally displayed as inline elements) are set to display: block
and so break onto new lines and expand to fill their container in the inline dimension.
<span>span 1</span> <span>span 2</span>
span { display: block; border: 1px solid rebeccapurple; }
run-in
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 1 — 32
|
No | No | 8 | 7 — 15 | 1 — 8
|
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | ? — 4.4.3
|
? — 32
|
No | No | ? | ? — 8
|
? |
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/display-outside