【HTML＋CSS初心者講座05】margin と padding で余白を自在にコントロールする方法

1. margin と padding とは？

CSSでは要素のまわりの余白を margin（マージン）と padding（パディング）というプロパティで指定します。

1-1. ボックスモデル（余白の構造）

CSSの余白の考え方は「ボックスモデル」と呼ばれます。内側から順に、以下の4層で構成されています。

1-2. pタグで余白を確認してみよう

<p>これは要素です</p> を例に、余白の変化を見てみましょう。

p {
  background: orange;
  padding: 0;
}

p {
  background: orange;
  padding: 10px;
}

さらに border と margin を加えてみましょう。

p {
  background: orange;
  padding: 10px;
  border: solid 3px black;
}

p {
  background: orange;
  padding: 10px;
  border: solid 3px black;
  margin: 10px;
}

1-3. width / height はどこの大きさ？

width と height は要素の「内容」部分の大きさを指定します。padding と border はその外側に加算されます。

2. margin と padding の書き方

margin と padding は書き方も指定できる値もまったく同じです。セットで覚えてしまいましょう。

2-1. 上下左右をまとめて指定

4方向すべてに同じ値を設定したいときは、値を1つだけ書きます。

<p class="above">前の要素</p>
<p class="middle">要素</p>
<p class="under">後の要素</p>

.middle {
  background: orange;
  padding: 10px;
  margin: 10px;
}
.above { background: skyblue; }
.under { background: silver; }

2-2. 上下左右の一部だけ指定

特定の方向だけ指定したいときはプロパティ名を変えます。

.middle {
  background: orange;
  padding-left: 20px;
  margin-top: 20px;
}

2-3. 上・右・下・左を一度にまとめて指定（時計回り）

4方向に異なる値を指定するとき、上から時計回り（上・右・下・左）の順に半角スペースで区切って並べます。

.middle {
  background: orange;
  /* 上0 右0 下20px 左20px */
  margin:  0 0 20px 20px;
  padding: 0 0 20px 20px;
}

2-4. 上下と左右をまとめて指定（2値指定）

値を2つ書くと「上下」と「左右」をまとめて指定できます。

.middle {
  background: orange;
  /* 上下20px 左右0 */
  margin: 20px 0;
  /* 上下0 左右20px */
  padding: 0 20px;
}

3. margin と padding を % で指定する

margin と padding は px だけでなく % で指定することもできます。%指定は主に左右の余白を指定するときに使います（上下の余白に%を使うことはほとんどありません）。

3-1. %指定の計算方法

margin・padding を % で指定したとき、基準になるのは親要素の「横幅（width）」です。

<div class="parent">
  <p>これは例文です</p>
</div>

.parent {
  background: silver;
  width: 200px;
}
.parent p {
  width: 60%;
  margin: 0 20%; /* 左右20%ずつ */
  padding: 0;
  background: orange;
}

3-2. border を加えるときの注意点

margin・padding・width を % で合計 100% に揃えていても、border の太さは % 指定できないため、border を追加するとその分だけ親要素からはみ出てしまいます。

3-3. %指定の使いどころ

margin・padding の % 指定は、レスポンシブデザインを作るときにとても便利です。

4. margin の相殺

前後に並んだ要素それぞれに margin が設定されているとき、margin の相殺という現象が起こります。これが CSS の余白設定を分かりづらくしている原因のひとつです。

4-1. margin が並ぶと1つしか適用されない

前の要素の margin-bottom と、後ろの要素の margin-top が隣接すると、どちらか大きい方のみが適用されます（合算はされません）。

.element1 {
  margin-bottom: 10px;
}
.element2 {
  margin-top: 20px;
}
/* → 要素間の実際の余白は 20px（大きい方）になる */

4-2. 親要素との間でも相殺は起こる

親要素の margin-top と、その中の子要素の margin-top が隣接するときも相殺が起こります。前の要素との余白は値の大きいほうが適用されます。

4-3. padding では相殺は起こらない

5. 要素を左右中央配置にするテクニック

margin の値に auto を指定すると、余白を自動で均等に配分してくれます。これを活用すれば display: block の要素を簡単に中央配置できます。

5-1. margin: 0 auto で中央配置

上下の margin は 0 にしたい場合、2値指定を使って margin: 0 auto とシンプルに書けます。

<div class="parent">
  <p>例文</p>
</div>

.parent {
  background: silver;
  width: 250px;
}
.parent p {
  width: 80px;
  margin: 0 auto; /* 中央配置の呪文 */
  background: orange;
}

5-2. 注意事項