<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

ブラウザーの互換性

BCD tables only load in the browser

関連情報