こんにちは。エンジニアの片岡です。

今回はmarginとpaddingの使い分けということでそれぞれの特徴と考え方について紹介していきます。知って使い分けられるようになればデザイン崩れが起きる確率もぐっと低くなると思います。

皆さんは過去にmarginやpaddingについて調べたことはありますでしょうか？

おそらく下記のような図は多くの方が見たことがあるのではないかと思います。

この図は、

・paddingはborderの内側の余白を表すよ

・marginはborderの外側の余白を表すよ

といった意味で利用されるのですが、具体的にどういう場面でそちらを使えばいいのかまで教えてくれるサイトは少ないでしょう。

marginやpaddingの考え方

別のものに例えて理解する

今回はそれぞれを別のものに例えて考えていきます。

1の画像の右側をピックアップしてみました。

border → 壁（自分の陣地がここまでで表す城壁のようなもの）

padding → 壁からこのくらいは距離を開けておこうという「陣地内の」余白

margin → 壁からこの距離は近寄ってくるなという「陣地外の」余白

とおいています。

例えば width: 600px; を指定すると「陣地の幅」が600pxになるということです。

height: 300px; padding: 30px; とすると実際に文字や画像が入る高さは240px

height: 300px; margin: 30px; とすると実際に文字や画像が入る高さは300pxで、外側に30pxずつ余白を取る

ということですね。

同じように、background-color: #F00; を付けると陣地内の背景が赤色になります。（padding部は赤色になり、margin部は色が付かない）

ここを間違えると変なところで文字の折り返しが入ったり、デザイン崩れの原因になりますのでご注意ください。

コードに触れて理解する

<style>
.section-inner {
  width: 600px;
  margin: 0 auto;

  /* わかりやすくするために上下に余白を付け、左右にボーダーを書いている */
  padding: 10px 0;
  border-right: dotted 1px #333;
  border-left: dotted 1px #333;
}
.section-block {
  width: 100%;
  height: 200px;
  background-color: #C33;
}
</style>
<section>
  <div class="section-inner">
    <div class="section-block">あああああああああ...（略）...あああ</div>
    </div>
</section>

上のようなものを作ってみました。

内側の.section-block（赤背景）はwidth: 100%ということで、親と同じ幅になっていますね。

文字は端まで行ってほしくないので、赤背景の部分はそのままで内側に余白を取りたいとなった場合どうすればよいでしょうか？

ここまで読んでいただいている皆さんであればもうわかると思います。

正解は赤背景（陣地）の大きさはそのままで、陣地の「内側」に余白を付けるので、paddingを設定するのが正解です。

padding: 30px;を付けるときれいに余白が取れました。

失敗したコードに触れて理解する

さっきの問題で誤ってmargin: 30pxを付けるとどうなってしまうのでしょうか？

少し予想してみてください

・

・

・

正解はこうなります！

右にずれてしまいましたね。

これはどうしてでしょうか？　考えていこうと思います。

まず、親の.section-inner（左右に点線があるもの）は、幅が600pxです。

内側の.section-block（赤背景）はwidth: 100%;なので同じく600pxとなります。

※正確には陣地にはborderが含まれているため598pxですがわかりやすいように割愛し、600pxとします

margin: 30px; ということで、.section-block（赤背景）は陣地の「外側」の前後左右に30pxずつ余白ができますね。

つまり、余白を含めた横幅は660pxとなります。

親の.section-inner（左右に点線があるもの）が600pxだったので親のサイズを超えてしまいましたね。

左側のmarginである30px、本体の陣地である600px分の570px分は点線の内側に収まり、残り陣地の30pxと右側のmarginの30pxは点線の外側にはみ出てしまったというのが右にずれたように見えている原因です。

このように、「どのstyleがどの役割を担っているのかを正確に把握すること」は、自身でCSSを書いたり調整したりする場合にすごく重要になりますし、何かバグを見つけた場合にも原因を特定しやすくなります。

いかがだったでしょうか？

margin・paddingを使っていないWebページはないと言っても過言ではないかと思います。

今回はdivの配置など大きな場所でmarginやpaddingを利用してきましたが、細かなところで役立つテクニックでもあります。

身に着けてどんどん応用していきましょう！