余白(マージン)の確保のされ方

スタイルシートで設定できる余白に「margin」(マージン)プロパティがあります。 例えば以下のように記述すると、段落(p要素)の周囲に10ピクセルの余白を設けることができます。

p {
   margin: 10px;
}

このようなスタイルを適用させた状態で、複数の段落を(縦方向に)並べて表示させた場合、段落と段落の間には何ピクセルの余白ができるでしょうか?

段落の周囲に10ピクセルの余白が設けられていて、段落が2つ並んでいるのだから、間は10+10で20ピクセル……と思いがちですが、そうはなりません。 隣接する段落間(上下)の余白量は、20ピクセルではなく10ピクセルです。合算はされないのです。

上下に隣接する余白(マージン)と
左右に隣接する余白(マージン)の違い

今、次のようなHTMLがあるとします。p要素が並んでいますので、複数の段落(ブロック)が表示されます。

<p>段落1</p>
<p>段落2</p>
<p>段落3</p>

ここで、次のようなスタイルを記述して、これらの段落(ブロック)を100×100ピクセルの正方形にして、横方向に並べます。

p {
   margin: 10px;  /* 余白量 */
   width: 100px;  /* 横幅 */
   height: 100px; /* 高さ */
   float: left;   /* 左に寄せて回り込み */
}

このとき、ブロックとブロックの間は何ピクセル空くでしょうか。

実際に表示させてみると、以下のように見えます。

段落1

段落2

段落3

ブロックとブロックの間は、20ピクセル空いています。
それぞれの横の余白(マージン)は10pxですから、10+10で20pxです。隣接する余白はどちらもそのまま表示され、合算されています。

しかし、縦に並んだ場合は、こうはなりません。
floatプロパティを使わず、普通に縦方向に段落を並べてみると、以下のように表示されます。

段落1

段落2

段落3

ブロックとブロックの間は、10ピクセルです。
それぞれの上下の余白(マージン)は10pxですから、10+10で20pxになりそうですが、ここでは合算されません。

上下に隣接する余白(マージン)は、どちらか大きい方の値が採用されるからです。

ここでは、上側の余白も下側の余白も両方10pxなので、ボックス間の余白も10ピクセルになります。
仮に、上側の段落の余白が25pxで、下側の段落の余白が12pxだとすると、これらの段落間の余白量は(大きい方を採って)25ピクセルになります。

おわりに

このように、上下と左右とでは、余白(マージン)の確保のされ方に違いがあります。 スタイルシートを使って細かくデザインする際などには、注意して下さい。

なお、「マージン」(margin/枠線から外側の余白)ではなく「パディング」(padding/枠線から内側の余白)を使って作成された余白は、隣接していてもそのまま合算して表示されます。 (大きい方だけが採用されたりはしません。)



※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。