Block-level content (ブロックレベルコンテンツ)

CSS において、ブロックレイアウトに関係するコンテンツはブロックレベルコンテンツと呼ばれます。

ブロックレイアウトでは、ボックスは次々と垂直に、包含ブロックの上からレイアウトされます。各ボックスの左の外辺は、格納するブロックの左の辺に接します。ブロックレベル要素は常に新しい行から始まります。英語やアラビア語のような横書きでは、親要素（コンテナー）の水平空間全体と、コンテンツを含む高さに等しい垂直空間を占めるため、「ブロック」を作成することになります。

メモ: 上記のブロックレイアウトの動作は、包含ブロックの書字方向 (writing-mode) が既定値と異なる場合には変わります。

メモ: HTML (HyperText Markup Language) の要素は従来、「ブロックレベル」要素または「インライン要素」の何れかに分類されてきました。これは表示特性であることから、現在は CSS において定義されています。

例

この例では、2 つの段落 (<p>) 要素が <div> の中に収められています。

html

<div>
  <p>
    これは最初の段落です。これらの段落の背景色は、親要素と区別できるよう色付けされています。
  </p>
  <p>これが 2 番目の段落です。</p>
</div>

段落 (<p>) 要素は既定ではブロックレベルです。このためブロックレイアウトで表示されます。

p {
  background-color: #8abb55;
}