<display-outside>

<display-outside> の値は、本質的にフローレイアウトにおける要素の役割である、要素の display の外部表示種別を指定します。これらのキーワードは display プロパティの値として使用され、単一のキーワードとしては伝統的な目的に、または Level 3 仕様書では <display-inside> のキーワードと共に使用されます。

構文

<display-outside> の値は、以下の一覧にあるキーワードを使用して定義します。

block
要素は、ブロック要素ボックスを生成し、通常フローでは要素の前後に改行を生成します。
inline
要素は自分自身の前後に改行を生成しない、一つ以上のインライン要素ボックスを生成します。通常フローでは、次の要素は空間があれば同じ行に来ます。
run-in 
要素は、ランインボックスを生成します。 display: run-in が定義された要素の隣接する兄弟がブロックボックスの場合、ランインボックスはその次のブロックスボックスの最初のインラインボックスになります。

ランイン要素は、周囲の要素に応じてインラインボックスまたはブロックボックスのように動作します。ランインボックスがブロックボックスを含んでいる場合は、ブロックボックスと同じになります。ブロックボックスが後続する場合は、ランインボックスはブロックボックスの最初のインラインボックスになります。インラインボックスが後続する場合は、ブロックボックスになります。

メモ: 二つの値の構文に対応しているブラウザーは、 display: blockdisplay: inline などの外部表示種別のみが指定されていると、内部表示種別を flow に設定します。これで期待通りに動作します。例えば、ある要素を block になるよう指定した場合、その要素の子はブロックおよびインラインの通常フローレイアウトに加わることを期待するでしょう。

以下の例では、 span 要素 (通常はインライン要素として表示) に display: block が設定されているので、改行が行われ、コンテナーのインライン方向を埋めるように拡張されます。

HTML

<span>span 1</span>
<span>span 2</span>

CSS

span {
    display: block;
    border: 1px solid rebeccapurple;
}

結果

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
<display-outside>Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 4Opera 完全対応 7Safari 完全対応 1WebView Android 完全対応 1Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 1Samsung Internet Android 完全対応 1.0
run-in
実験的
Chrome 未対応 1 — 32
補足
未対応 1 — 32
補足
補足 Before Chrome 4, run-in was not supported before inline elements.
Edge 未対応 なしFirefox 未対応 なしIE 完全対応 8Opera 未対応 7 — 19Safari 未対応 1 — 8
補足
未対応 1 — 8
補足
補足 Before Safari 5, run-in was not supported before inline elements.
WebView Android 未対応 ≤37 — ≤37Chrome Android 未対応 18 — 32Firefox Android 未対応 なしOpera Android 未対応 10.1 — 19Safari iOS 未対応 1 — 8
補足
未対応 1 — 8
補足
補足 Before Safari 5, run-in was not supported before inline elements.
Samsung Internet Android 未対応 1.0 — 2.0

凡例

完全対応  
完全対応
未対応  
未対応
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。

関連情報