皆さんは、「margin」と「padding」を正しく使い分けていますでしょうか？

AというコンテンツとBというコンテンツの間に余白を入れたい場合、果たしてどちらを使ったらいいのか、CSSの勉強を始めてしばらくすると悩んでしまう場面に遭遇することもあると思います。

この使い分けを正しく理解しておくことで、実は謎の現象についても解決することができます！

謎の現象については後ほど解説しますが、「margin」と「padding」には明確な使い分けがあります。

ぜひその違いを理解して、正しいコーディングを身につけていきましょう！！

marginプロパティについておさらい

まずは、marginプロパティについて軽くおさらいしておきましょう。

marginは、ボックスコンテンツ（幅と高さのあるコンテンツ）についてボックスの外側に余白を設定するCSSになります。

CSSの記述については、以下のように用途に合わせて幾つかの記述方法があります。

/* marginプロパティを使って上下左右に余白を設定する */
section {
  margin: 20px; /* 上下左右全てに20pxの余白 */
  margin: 20px 30px; /* 上下20px、左右30pxの余白 */
  margin: 20px 30px 40px; /* 上20px、左右30px、下40pxの余白 */
  margin: 20px 30px 40px 50px; /* 上20px、右30px、下40px、左50pxの余白 */
}

/* 上下左右個別に余白を設定する */
section {
  margin-top: 20px; /* 上余白 */
  margin-right: 30px; /* 右余白 */
  margin-bottom: 40px; /* 下余白 */
  margin-left: 50px; /* 左余白 */
}

/* ボックスコンテンツをブラウザ中央に配置する */
section {
  width: 800px; /* 横幅を800pxに設定 */
  margin: 0 auto; /* 上下余白0px、左右余白を自動設定 */
}

他にも特殊な設定の仕方もあるのですが、また別の機会で紹介していきたいと思います。

paddingプロパティについておさらい

paddingプロパティについても軽くおさらいしておきます。

paddingは、ボックスコンテンツ（幅と高さのあるコンテンツ）に対して、コンテンツの内側に余白を設定します。

CSSの記述方法は、marginとほぼ同じですが、autoやマイナスの値は使えません。

/* paddingプロパティを使って上下左右に余白を設定する */
section {
  padding: 20px; /* 上下左右全てに20pxの余白 */
  padding: 20px 30px; /* 上下20px、左右30pxの余白 */
  padding: 20px 30px 40px; /* 上20px、左右30px、下40pxの余白 */
  padding: 20px 30px 40px 50px; /* 上20px、右30px、下40px、左50pxの余白 */
}

/* 上下左右個別に余白を設定する */
section {
  padding-top: 20px; /* 上余白 */
  padding-right: 30px; /* 右余白 */
  padding-bottom: 40px; /* 下余白 */
  padding-left: 50px; /* 左余白 */
}

「margin」と「padding」の正しい使い分け

marginとpaddingの正しい使い分けについてお話ししていきます。

marginプロパティは、ボックスコンテンツの外側の余白を設定するものですが、厳密には「隣接する要素の間に余白を設定」するものになります。

実は、この前提が結構重要になっていて、隣接していない場面で余白を設定しようとすると意図しない結果になってしまう場合もあります。

一方、paddingプロパティは、ボックスコンテンツの内側に余白を設定するものですが、それ以外の用途としては、「親要素と子要素の間に余白を設定」する場合に使われます。

paddingはデザイン上、背景を塗りつぶしたコンテンツの内側に余白を設定する場合に多く使われますが、入れ子になっている要素に対して余白を設定する場合にも使用します。

子要素にmarginを設定すると親要素に反映される謎現象？

初学の段階で結構混乱される方が多い現象のひとつに「子要素にmarginを設定すると親要素に余白が反映されてしまう」というものがあります。

一例として、HTMLとCSSのサンプルコードを紹介します。

<section>
  <div>
    <h3>小見出し</h3>
    <p>テキストテキストテキストテキスト</p>
  </div>
</section>

上記HTMLのように、入れ子構造になっている要素があるとします。

これに以下のようなスタイルシートを設定するとどうなるでしょうか？

section {
  background: #aff;
}
div {
  width: 50%;
  margin: 40px auto;
  background: #faf;
}

実際に反映させてみると以下のようになります。

一時期、これはCSSのバグでは？と言われていましたが、れっきとした正しい仕様です。

先に言った通り、隣接する要素間の余白を設定するのがmarginなので、親要素と子要素の間は隣接ではないため、外側の親要素に対して隣接する要素との間に設定されてしまいます。

回避する方法については、paddingを使うのが正しい対応ですが、それ以外にも回避する方法があるので、別途改めて解説したいと思います。

まとめ

marginプロパティとpaddingプロパティについては、ボックスコンテンツの外側か内側か、という認識しか無い方も多いかもしれませんが、正しい使い分けを理解することで一見すると謎仕様に感じることもキチンとした正しい仕様であることが理解できると思います。

marginは、隣接した要素どうしの余白を設定するもの

paddingは、親子要素どうしの余白を設定するもの

という感じで理解しておくと、失敗しないと思います。

HTML、CSSの正しい仕様を理解して、正しいコーディングを身につけましょう！！