HTML&CSSコーディング
paddingとmarginで余白をつくる

余白は、見やすいデザインに不可欠です。ここでは、余白をつくるpaddingプロパティとmarginプロパティについてわかりやすく解説します。

padding/marginの違い

paddingは、ボックス（ブロック要素）の枠線から内側のコンテンツまでの距離です。

marginは、ボックスの枠線から外側のその他要素または境界までの距離です。

距離を取ったところは、デザイン上、余白になります。

padding/marginの比較

以下、次の3つのdivタグを例に、paddingとmarginをそれぞれ設定してみます。

なお、bodyタグにはデフォルトで8pxのmarginが設定されていますが、ここではわかりやすいように0にしています。また、divタグには枠線をつけてあります（border: solid 1px black;）。

<div>今日は晴れでした。</div>
<div>明日は雨が降るかもしれません。</div>
<div>でも明後日は晴れるみたいです。</div>

以下、padding/margin適用前です。3つのボックスが重なっています。

padding使用例

div {
  border: solid 1px black;
  padding: 20px;
}

margin使用例

div {
  border: solid 1px black;
  margin: 20px;
}

padding/marginの値の書き方

paddingとmarginの値の書き方は、基本的に同じです。

どちらのプロパティも上記例のように値を一つだけ記述すると四辺（上下左右）の距離を指定できます。

また、値を二つ記述すると上下と左右の距離を指定できます。このとき、値と値の間にカンマは入れません。

div {
  border: solid 1px black;
  padding: 20px 40px;
}

div {
  border: solid 1px black;
  margin: 20px 40px;
}

さらに、値を四つ記述すると上、右、下、左の距離を指定できます。上から時計回りに指定します。

div {
  border: solid 1px black;
  padding: 20px 40px 60px 80px;
}

div {
  border: solid 1px black;
  margin: 20px 40px 60px 80px;
}

上下marginの相殺

基本的に、上下に隣接する要素に設定されるmarginの重なる部分は値の大きいほうが適用されます。

例えば、上の要素の下部marginが10px、下の要素の上部marginが20pxに設定されている場合、上下の要素の余白は20pxになります（30pxにはなりません）。

このどちらか大きい方のみが適用されることをmarginの相殺（たたみ込み）といいます。

一辺だけを設定するロングハンド

padding/marginを一辺だけ適用させたいときには、ロングハンドプロパティ（通称「ロングハンド」）を使用する方が簡単です。

詳しくは、ショートハンドとロングハンドで解説します。