私がおすすめするpaddingとmarginをなんとなく理解するまでの流れ
paddingとmarginのイメージをつかむ
↓
動いているものを見る・大まかな使い分けを知る
↓
試してみる・動かしてみる
↓
marginの相殺など、特殊な動きをするものを知る（これも試す）
よくある padding と margin の例え
アボカドver
padding「果肉」
marginは「アボカドとアボカドの間」
（borderは「アボカドの皮」、文字などのコンテンツ領域が「種」
住宅街ver
padding「家の庭」
marginは「道路」
（borderは「家の塀」、文字などのコンテンツ領域が「家」
ソーシャルディスタンスver
padding「皮下脂肪」
marginは「人と人との距離」
（borderは「皮」、文字などのコンテンツ領域が「内蔵(?)」
例えてイメージして、使って感覚を掴む繰り返し
例えは何でもよくて、最初は繰り返しイメージを掴めればいいと思います！
また、無理にイメージを掴むより次のステップとして、コードを書いて感覚を掴むに進むでも良いかと。
使っていくうちに、
margin は、「外側の余白」だから、ボックスの周りの見えないスペース
padding は「内側の余白」だから、 border と文字などのコンテンツ領域の間にあるスペース
といった感覚になってくると思います！
paddingは親子関係の余白・marginは兄弟要素間の余白で使い分け
paddingとmarginを動かしながら感覚を掴みます。
ここではpaddingは親子関係の余白・marginは兄弟要素間の余白と使い分けていきます。
以下のような画像だけでもいいのですが、実際のページの中で padding や margin の数値を増減させながら掴むといいと思います！
変化を視覚的に見て感じる
STUDIOというボタンを操作するだけで、marginやpaddingを表現できるツールで撮影しています。
「緑」...padding
「オレンジ」...margin
ヘッダーのメニューの余白をつける
各アイテムはお互いが兄弟要素なので、小アイテムの左右に「margin」
キャッチコピーの左に余白をつける
写真が背景になっているBOXと、キャッチコピーは親子関係なので親BOXに「padding」
キャッチコピーとサブタイトルは兄弟関係なので子アイテムに「margin」
カード型デザインの余白をつける
カード本体のBOXと中身の写真などのコンテンツは親子関係なので、親BOXに 「padding」
コンテンツ同士は兄弟関係なので、それぞれに「margin」
paddingとmarginどっちでもレイアウトすることは可能（できないこともある）
paddingとmarginどちらをつかってもレイアウト可能です。
例えばこちらのカード型デザインを全てmarginでレイアウトすると、タイトルの下に日付が入った場合に、
日付に改めて左方向にmarginを指定しないといけなくなります。
背景色のエリアを広げたり、hoverに反応する範囲を広げつつ余白をとる場合は 「padding」
文字の上だけでクリックできるようなデザインだと、非常に使い勝手が悪いので、
背景色のエリアを広げたり、hoverに反応する範囲は 「padding」で余白をとります。
（『BOX自身の内側に 「padding」で余白をとってから、兄弟関係で余白が必要なら「margin」をとる』ともいえる）
ヘッダーも修正
開発者ツールで動かしてみる
開発者ツールで色々動かしながら試してみるのもいいと思います！！
結論、全体像を理解したら、書いたり動かしたりするのが１番！！
marginの相殺など、他にも知っておくべきポイントはたくさんありますが、
まずは自分で書いて、色々と試してみるのがおすすめです！
MDNのサイトでも数値を変えたら動くのでイメージしやすいです。
https://developer.mozilla.org/ja/docs/Web/CSS/padding
↧