なるWeb 
どうも7noteです。今回はmarginとpaddingの違いや使い分けの方法について。
※本記事ではmarginもpaddingも余白という日本語で扱っています。
他のサイトではpaddingの事だけを余白と紹介していたりしますが、ごっちゃにならないようご注意ください。
初心者あるあるで、この余白はmarginとpaddingどっちを使えばいいのだろう・・・と悩むことは多いと思います。わたしも一時期まではいつも迷ってなんとなくの感覚でmarginかpaddingをあてていたのですが、同じように迷っている人が多いのではと思い、この記事を書きました。
同じ悩みを抱えている人が一人でも減ると嬉しいです！
marginとpaddingの違いは要素の外側の余白か内側の余白かの違い
どちらも余白を取るためのものですが、使いわけるためにはまずは違いを知ることが大切です。
大きな違いとして、余白をとる場所が違います。
- marginは要素の外側に余白
- paddingは要素の内側に余白
上のようにmarginは要素の外側に余白をとります。それに対してpaddingは要素の内側に余白をとります。
どういうことかというと、図で説明します。
上の図は「ボックスモデル」と呼ばれているものです。ボックスモデルとは一言でいうならcss上のルールや決まりで決められている事項のことです。
インライン要素、ブロック要素問わず全ての要素にこのボックスモデルが適応されています。
図をみていただくとmarginとborderの間に黒い線が入っていると思いますが、この黒線の内側が要素の大きさになります。この要素の内側に余白をとるのか、要素の外側に余白を取るのかの違いがmarginとpaddingの違いになります。
ボックスモデルについてはまた詳しい説明の記事を書きたいとおもっていますが、別のサイトで詳しく紹介されていたのでいくつかリンクを貼っておきます。
いますぐボックスモデルについて詳しく知りたい方はどうぞ。
https://nulab.com/ja/blog/nulab/css-basics-for-engineer-boxmodel/
marginとpaddingでは他のcssの適応範囲が違う（背景色）
marginとpaddingでは他のcssの適応範囲が変ることとがあります。
それはbackground（背景）です。
実際に違いを見てみましょう。
<div class="square01">四角1(padding)</div>
<div class="square02">四角2(margin)</div>.square01 {
width: 200px; /* 要素の横幅 */
height: 200px; /* 要素の高さ */
background: #CCF; /* 背景色に青を指定 */
padding: 50px; /* 内側の余白 */
}
.square02 {
width: 200px; /* 要素の横幅 */
height: 200px; /* 要素の高さ */
background: #CCF; /* 背景色に青を指定 */
margin: 50px; /* 外側の余白 */
}
図の真ん中より左側が実行結果で、右側はわかりやすいように色をつけたものになります。
またpaddingを指定するとpaddingも含めた分が横幅になるので、四角1は300px、四角2は200pxの幅と高さになるので、見た目の大きさが違うように見えているだけです。
このように、backgroundに背景色を指定するとpaddingでとった余白には色がつきますが、marginてとった余白には色がつきません。
backgroundは要素に対して背景色をつけるので、要素の内側にあるpaddingには色がつきますが、marginは要素の外にあるので色がつかないことがわかります。
marginとpaddingの使い分け
じゃあ実際に使う時どのように使い分けるのか。これについて書いていきます。
まずmarginですが、これは以下のように考えてください。
「margin」はほかの要素との距離をとるための余白
どういう意味かというと、コンテンツAとコンテンツBがあります。
コンテンツBはコンテンツAからみてどれくらい距離があるかをmarginで取るということになります。
marginが必要な場面は、複数の要素同士がどれくらいの距離関係にあって、どの要素を基準として距離（余白）を取るべきかということをあらわすときに使います。
もっとわかりやすく書いている記事を紹介↓
デザイナーの考える「余白」とは何か書き下してみる
そしてpaddingは以下のように考えます。
「padding」は背景色を入れた場合、変ではないか
ちょっと雑な考え方かもしれませんが、この考え方が一番わかりやすいと思います。
もし、その余白の部分に背景色を入れないといけなくなった場合、背景色を入れても見た目的に違和感がないか考えて、違和感のない場所であればpaddingを使います。
もしくはmarginでは取れない余白なんかもあるので、そのような場合にはpaddingを使います。
まとめ
初めは使い分けが難しいですが、違いをしっかりと理解すれば綺麗なコーディングができると思います。
ただ参考にしたサイトにも書いてあったのですが、最終的にはコードを書いているあなたが見えた通り、考えた通りに書くのが一番かなと思います。最終的に自分で直すことの方が多いと思うので。
ただマイルールが定着していない場合はぜひこの記事を参考にして綺麗なコーディングを目指してもらえると嬉しいです！
少しでもここpadding??margin???と悩む時間が減れば嬉しいです！
