paddingとmarginを理解する

今日もWebサイト制作周りのことをつらつら。

今回は見出しにある通り、paddingとmarginの使い分けについてお話したいと思います。

違いが分かりづらいpaddingとmargin

Webサイト制作などでHTML&CSSを触るときに必ず遭遇するこのpaddingとmarginという概念。

これが慣れるまでは中々イメージが掴めなかったり、思ったように余白を調整できなかったりします。

この記事を通して、今回はpaddingとmarginの感覚を掴んでいただけたらな思います。

そして、もっと余白が扱うのが上手になっていただけたらなと思います！

もういきなり答えみたいな、今回の記事で僕が1番伝えたいことを初っ端に書いちゃうんですけど、僕は

paddingとmarginを「皮下脂肪」と「ダウンジャケット」

だと捉えています。

これだけで理解できた方は、もう完璧なので早速パソコンを開いて作業を続けてください（笑）

もう少し具体的に説明します。

要素自体にはそれ本来の大きさがあります。

文字だったり、画像自体の大きさだったり。

ただ、皮下脂肪（=padding）か多すぎるせいで本来の大きさ以上に膨れ上がって、皮膚（=border）が大きく膨れ上がります。

その結果、その要素の範囲はそのborderまでが範囲となります。

一方で、皮下脂肪（=padding）は全くなくてもダウンジャケット（=margin）を着ているせいで、皮膚（=border）の外側に範囲が増えていくパターンもあります。

皮下脂肪（=padding）は皮膚（=border）の内側なので、他の要素と重なり合わないです（体内なので？）。

一方で、ダウンジャケット（=margin）は他の要素のダウンジャケット（=margin）同士で重なり合うことができます（皮膚の外なので？）。

このイメージさえ掴めれば、paddingとmarginの違いはかなり理解しやすくなると思います。

皆さんも引き続き、勉強を続けましょう！