<display-outside>
<display-outside> のキーワードは、本質的にフローレイアウトにおける要素の役割である、要素の display の外部表示種別を指定します。これらのキーワードは display プロパティの値として使用され、単一のキーワードとしては伝統的な目的に、または Level 3 仕様書では <display-inside> のキーワードと共に使用されます。
構文
有効な <display-outside> の値は以下の通りです。
block-
要素は、ブロック要素ボックスを生成し、通常フローでは要素の前後に改行を生成します。
inline-
要素は自分自身の前後に改行を生成しない、一つ以上のインライン要素ボックスを生成します。通常フローでは、次の要素は空間があれば同じ行に来ます。
メモ:
2 つの値の構文に対応しているブラウザーは、外部 display 値（display: block や display: inline など）のみが指定されていると、内部表示種別を flow に設定します（display: block flow や display: inline flow など）。
これは単一のキーワード構文との下位互換性があります。
形式文法
<display-outside> =
block |
inline |
run-in
例
以下の例では、 span 要素 (通常はインライン要素として表示) に display: block が設定されているので、改行が行われ、コンテナーのインライン方向を埋めるように拡張されます。
HTML
html
<span>span 1</span> <span>span 2</span>
CSS
css
span {
display: block;
border: 1px solid rebeccapurple;
}
結果
仕様書
| Specification |
|---|
| CSS Display Module Level 3 # typedef-display-outside |
ブラウザーの互換性
css.properties.display.block
Loading…
css.properties.display.inline
Loading…