更新日
#15 paddingとmarginの違いとボックスモデルの理解
web兄さん
本講座のゴール
「#08_よく使う10個のプロパティを覚えよう」で学習したpaddingとmarginですが、「どんな時にpaddingを使って」逆に「どんな時にmarginを使う」のか、いまいちピンときていませんよね。
この講座では最終的に小テストを用意して「このケースはmarginとpaddingどっち？」というクイズを出します。そのクイズの正答率が7割越えるようになれば良いと思います！
paddingとmarginは余白を調整するために使う
paddingとmarginが「何を」調整するために使用されるものかというと「余白」になります。ここでいう余白とは要素同士の間隔という意味です。
HTMLは通常上と左へ要素を詰めて配置されます。そのためpaddingやmarginで余白を確保しないと綺麗に見せることができません。
「要素」という言葉についておさらい
<開始タグ>〜〜</終了タグ>のひとまとまりを要素と呼びます。例えば、<h1>大見出し</h1>←これはh1要素であり、<img src="photo.jpg">←これはimg要素と呼びます。