通常フロー

まず始めに、個々の要素ボックスは要素のコンテンツを取り、それからそれらの周りにパディング (padding、詰め物)、境界 (border)、マージン (margin、余白) を追加することによってレイアウトされます。これはまた以前に見たことがあるボックスモデルのことです。

既定では、ブロックレベル要素のコンテンツは、それを包含する親要素の利用可能なインライン空間を満たし、そのコンテンツを収めるためにブロック方向へ成長します。インラインレベル要素のサイズは、そのコンテンツのサイズだけです。 width や height を、 display プロパティが既定で inline である要素、例えば <img> に設定しても、 display 値は inline のままです。

この方法でインラインレベル要素の display プロパティを制御したい場合は、 CSS を使用してブロックレベル要素のように動作するように設定します（例えば、 display: block; または display: inline-block; を使用し、両方の特性を混合します）。

それは個々の要素を説明していますが、要素がどのように相互作用するかについてはどうでしょうか？ 通常のレイアウトフロー (レイアウト入門の記事に記載) は、ブラウザーのビューポート内に要素を配置するシステムです デフォルトでは、ブロックレベル要素は、親の書字方向 (writing mode、初期値 は horizontal-tb) に基づいてブロックのフロー方向 にレイアウトされます。各要素は最後の行の下に新しい行として現れ、各要素は指定したマージンで区切られます。例えば英語では（あるいは他の横書き、上から下への書字方向でも）ブロックレベルの要素は縦に並べられます。

インライン要素は異なるふるまいをします。新しい行に現れません。代わりに、親ブロックレベル要素の幅の内側にマージンがある限り、それらは互いに同じ行に配置され、隣接する (または折り返された) テキストコンテンツに配置されます。空間がなければ、あふれているテキストや要素は新しい行に移動します。

隣接する 2 つの要素の両方にマージンが設定されていて、2 つのマージンが接触している場合、2 つのうち大きい方が残り、小さい方が消えます。これはマージンの相殺 (margin collapsing) と呼ばれます。 マージンの相殺は、垂直方向のみ発生します。

これらすべてを説明する簡単な例を見てみましょう。

<h1>基本的な文書フロー</h1>

<p>
  これは基本的なブロックレベル要素です。隣接するブロックレベル要素は下の新しい行に配置されています。
</p>

<p>
  既定では、親要素の幅の 100% にわたり、子コンテンツと同じ高さになります。幅と高さの合計は、コンテンツ + パディング + 境界の幅/高さです。
</p>

<p>
  マージンによって分けられています。マージンの相殺のため、両方ではなく、 1 つのマージンの幅で区切られます。
</p>

<p>
  <span>これ</span>と<span>これ</span>のようなインライン要素は、同じ行に配置され、同じ行に空間がある場合は隣接するテキストノードに配置されます。
  あふれたインライン要素は、<span>可能であれば（このようにテキストを含むものであれば）新しい行に折り返され</span>、そうでなければ次の画像のように単に新しい行に進みます。
  <img src="long.jpg" alt="snippet of cloth" />
</p>

body {
  width: 500px;
  margin: 0 auto;
}

p {
  background: rgb(255 84 104 / 30%);
  border: 2px solid rgb(255 84 104);
  padding: 10px;
  margin: 10px;
}

span {
  background: white;
  border: 1px solid black;
}

この学習では、通常フロー（CSS 要素の既定レイアウト）の基本を学びました。既定ではインライン要素、ブロック要素、マージンがどのように動作するかを理解することで、将来的にそれらの動作を変更しやすくなります。

次の記事では、フレックスボックスを使用して CSS 要素に変更を加えることで、この知識をベースにしていきます。

• 前のページ
• Overview: CSS レイアウト
• 次のページ