<display-outside>

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

構文

有効な <display-outside> の値は以下の通りです。

block

要素は、ブロック要素ボックスを生成し、通常フローでは要素の前後に改行を生成します。

inline

要素は自分自身の前後に改行を生成しない、一つ以上のインライン要素ボックスを生成します。通常フローでは、次の要素は空間があれば同じ行に来ます。

メモ: 2 つの値の構文に対応しているブラウザーは、外部 display 値(display: blockdisplay: inline など)のみが指定されていると、内部表示種別を flow に設定します(display: block flowdisplay: 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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
block

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

css.properties.display.inline

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
inline

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報