こんにちは！ケインコスゲ（@keinkosuge）です。
今回は、改めてCSSのmarginとpaddingの使い分けについて考えてみたいと思います。
CSSレイアウトを学ぶ時に1番最初に立ちはだかる壁といっても過言ではないmarginとpaddingの使い分けについて、参考にしてみてくださいね！
目次
HTMLのボックスモデルとCSSのmarginとpaddingについて
まずは、CSSのmarginとpaddingがそれぞれどういう意味で、どんなことができるのかを確認してみましょう。
既にご存じの方は、読み飛ばして先に進んでいただいても問題ないですよ！
HTMLのボックスモデルについて
HTMLタグは、基本的に以下の形で構成されているものが多いです。
HTMLタグは全て四角い箱・ボックスの形で成り立っているのですが、それぞれのボックスは内側から順に
- 中身
- 枠線・境界線と中身の間に生じる余白（内余白）
- 枠線・境界線
- 枠線・境界線の外側にできる余白（外余白）
以上4つで構成されています。このHTML構成のことを、一般的にボックスモデルと言います。
CSSのmarginとは？？
CSSのmarginとは、ボックスモデルでいう外余白のこと、HTMLタグの外側にできる余白のことを指します。
上記の例を見てみてください。このブログArrownのトップページをPCで見たときに、1番上の方にあるロゴと説明文あたりのHTMLの内容を示しています。
ロゴ（h1タグに相当）と説明文（h2タグに相当）の間には余白が生まれていると思うのですが、この部分を、ショートカットで覚えるGoogle Chromeデベロッパーツールの使い方・ HTML＆CSS編でもご紹介しているGoogle Chromeのデベロッパーツールで見てみます。
h1タグ（Arrownと書かれている部分）とh2タグ（説明文が書かれている部分）の間に生まれている余白は、h1タグに対して設定されているmargin-bottomというCSSによって生じている余白であることが確認できます。
CSSのpaddingとは？？
次に、CSSのpaddingについてです。
paddingとは、ボックスモデルでいう内余白のこと、HTMLタグの枠線・境界線とHTMLの中身（テキストなど）の間に生じる余白のことを指します。
再び別の例を見てみてください。このブログArrownをPCで見たときに、右サイドにある検索フォームの部分を拡大表示した図になっています。
この部分はinputタグというHTMLタグで書かれているのですが、inputタグに設定されているpaddingというCSSによって、検索フォームの枠線・境界線と入力テキストの間に余白が生まれています。
結果、入力された文字も読みやすくなっていますよね！これがpaddingです。
CSSのmarginとpaddingの違いを知ろう
ここまでは、HTMLのボックスモデルと共に、CSSのmarginとpaddingについて紹介させていただきました。
しかし、実際CSSを書いていると、marginとpaddingをどう使い分けすればいいのか、悩むことが多々あります。
ここでポイントなのが「marginとpaddingの違い」についてきちんと理解することなんです！
ここからは、margintとpaddingの違いについて、見ていきましょう！
marginとpaddingの違いその1・paddingには背景色や背景画像が設定されるが、marginで設定された余白には背景色や背景画像が表示されない
まずは1番わかりやすい違いmarginとpaddingのについて説明します。
CSSを使っていると、HTMLタグに対して背景色を塗ったり、背景画像を表示したりしたい時がよくあります。
ここで知っておいてほしいのが、paddingの部分には背景色や背景画像が表示されるのに対して、marginの部分には背景色や背景画像が表示されないという違いがあるということなんです！
先ほども出てきた、このブログArrownのトップページの1番上あたりの部分を再び題材に説明させていただきます。
ロゴに設定されているHTMLのh1タグに対してCSSでbackground-color、つまり背景色を適用してみました。
するとh1タグ（Arrownの部分）とh2タグ（Arrownの下の説明文）の間に設定されている余白部分には、背景色が塗られていないですよね！
前述したように、h1タグ（Arrownの部分）とArrownの下の説明文（h2タグ）との間には、h1タグに指定したmargin-bottomというCSSによって余白が設定されています。
このことからも「margin部分には背景色や背景画像が表示されない」のがお分かり頂けるのではないかと思います！
ちなみに、h1タグ部分にpaddingを設定すると、上記画像のような見栄えになります。
赤い背景色が、paddingで作られた余白にも生じていることがわかりますよね！
marginとpaddingの違いその2・marginには変な特徴（バグ？）がある
次にご紹介するmarginとpaddingの違い、それはmarginには変な特徴が存在しているということです。
注意すべきmarginの2つの特徴について、ここから見ていきましょう！
marginが重なりあうときは相殺される（paddingが重なりあっても相殺されない）
まず知っておきたいmarginの特徴は、marginが重なりあうときは相殺されるということです。
paddingの場合は重なりあっても相殺されないので、ここは大きな違いになります。
上記の例を見てみてください。上記の画像では、h3タグの下にpタグが存在している状態になっています。
この時、以下の内容をCSSで適用してみます。
- h3のmargin-bottomに40px
- pタグのmargin-topに20px
すると、h3タグとpタグの間に生じる余白は「40+20=60px」にはならずに、40pxになります。
（画像でいう青色部分ですね）
これが「重なり合うmarginが相殺される」事例となります！
marginが親要素をこえてはみ出すケースがある
次にご紹介するmarginの特徴、それは「marginが親要素をこえてはみ出すケースがある」というものになります。
一体どういうことなのか？？まずは下の画像を見てみてください！
divタグの中にh2タグやその他画像や文章が入っています。
この時、内側に入っているh2タグにmargin-topを設定して、divタグとh2タグの間に余白を取ろうとすると、marginがdivタグを突き抜けて設定されるような状態になってしまうのです
この仕様、本当に謎ですよね・・・
しかも、このdivタグに対してborderを設定すると、なんとびっくりdivタグとh2タグの間に余白ができるようになるのです。
CSSのmarginとpaddingの使い分けのポイント
先ほどまでご紹介したmarginとpaddingの違いを踏まえて、いよいよmarginとpaddingの使い分けについて触れていきたいと思います！
marginとpaddingの使い分けその1・背景画像や背景色を余白部分に表示させたい時はpaddingを使う
marginとpaddingの使い分けポイントその1をご紹介します！
背景画像や背景色を余白部分に表示させたい時はpaddingを使いましょう。
これはmarginとpaddingの違いの紹介部分で触れた通り、paddingで出来た領域には背景色が適用されるので、この特徴をそのまま生かした使い分けポイントになります。
marginとpaddingの使い分けその2・隣合うHTML同士の余白を空ける時はmarginを使用
marginとpaddingの使い分け、2つ目のポイントは、「隣り合うHTML同士の余白を空ける時は、marginを使用する」ということです。
ボックスモデルの図を再度見てみると、marginはHTMLタグの外側にできるものになっています。
2つHTMLタグを並べて書いた場合、HTMLとHTMLの間の余白を開けたい場合は、タグとタグの間の余白になるので、marginを使って余白を空けるのが本来の意味にそぐう形になるのです。
marginとpaddingの使い分けその3・marginを使用する際は極力、上下方向についてはどちらか片方に統一して適用する
marginとpaddingの使い分け3つ目のポイントは、「margin を使用する際は極力、上下方向どちらかに統一して適用する」です。
これはmarginの特徴をご紹介させていただいた時にも触れた「重なり合うmarginは相殺される」という特徴を踏まえて、なるべくこの特徴に当たらないようにするための考え方です。
上下方向の余白はmargin-topでも表現できますし、margin-bottomでも表現できるのですが、両方を混ぜて使っていると、どこかしらでmarginの相殺現象が起きてしまい、思いもよらないレイアウト状態になってしまう可能性があります。
この状況を避けるために、上下方向のmarginについては、らかじめmargin-topかmargin-bottomのどちらかのみ使用すると決めておけば、相殺現象が起きることは全くなくなるわけなのです。
marginとpaddingの使い分けその4・親要素と子要素の余白を空けるのはpaddingを使用する
marginとpaddingの使い分け4つ目のポイントは、「親要素と子要素の余白を空けるのはpaddingを使用する」です。
これは、marginの特徴でも触れた「marginが親要素をこえてはみ出すケースがある」という謎の特徴を踏まえて、謎の特徴が起きる状況を避けるための考え方となっています。
まとめ
改めてmarginとpaddingの使い分け4つのポイントをまとめてみました。
考え方としては「marginには変な特徴があるから、あらかじめ変な特徴が起こらないような状況を作る」方針を基にしています。
必ずしも今回ご紹介した4つの使い分けポイントが100%当てはまるとは限りませんし、あえてmarginの変な特徴を生かして余白の設定をすることもあります。
ただ、ご紹介した4つの使い分けポイントを活用すれば「思った通りに余白が取れない」という状況は限りなく減らしてくれると思いますので、ぜひ参考にしていただければと思います！
