今日もWebサイト制作周りのことをつらつら。
今回は見出しにある通り、paddingとmarginの使い分けについてお話したいと思います。
違いが分かりづらいpaddingとmargin
Webサイト制作などでHTML&CSSを触るときに必ず遭遇するこのpaddingとmarginという概念。
これが慣れるまでは中々イメージが掴めなかったり、思ったように余白を調整できなかったりします。
この記事を通して、今回はpaddingとmarginの感覚を掴んでいただけたらな思います。
そして、もっと余白が扱うのが上手になっていただけたらなと思います！
「皮下脂肪」と「ダウンジャケット」
もういきなり答えみたいな、今回の記事で僕が1番伝えたいことを初っ端に書いちゃうんですけど、僕は
paddingとmarginを「皮下脂肪」と「ダウンジャケット」
だと捉えています。
これだけで理解できた方は、もう完璧なので早速パソコンを開いて作業を続けてください（笑）
もう少し具体的に説明します。
paddingは要素の内側
要素自体にはそれ本来の大きさがあります。
文字だったり、画像自体の大きさだったり。
ただ、皮下脂肪（=padding）か多すぎるせいで本来の大きさ以上に膨れ上がって、皮膚（=border）が大きく膨れ上がります。
その結果、その要素の範囲はそのborderまでが範囲となります。
marginは要素の外側
一方で、皮下脂肪（=padding）は全くなくてもダウンジャケット（=margin）を着ているせいで、皮膚（=border）の外側に範囲が増えていくパターンもあります。
要素同士の重なり
皮下脂肪（=padding）は皮膚（=border）の内側なので、他の要素と重なり合わないです（体内なので？）。
一方で、ダウンジャケット（=margin）は他の要素のダウンジャケット（=margin）同士で重なり合うことができます（皮膚の外なので？）。
このイメージさえ掴めれば、paddingとmarginの違いはかなり理解しやすくなると思います。
皆さんも引き続き、勉強を続けましょう！