marginとpaddingはCSSの基本ですが、正確に理解できていないと「レイアウト崩れ」にもつながります。この春CSSを学び始めた方へ、必読の解説記事です。 CSSを学び始めたばかりのころ、marginプロパティとpaddingプロパティに混乱しました。そっくりに感じただけでなく、同じ表示になっているとさえ思えました。 このチュートリアルでは、CSSにおけるmarginとpaddingの違いと、Webページでの余白への影響について解説します。さらにマージンの相殺(margin collapsing)やレスポンシブWebサイトの作成でさまざまな単位を使った場合の効果について説明し、最後にCSSのmarginと paddingを使って実現できるレイアウトテクニックをいくつか紹介します。 ボックスモデル CSSは、要素を四角形のボックスで表します。四角形のサイズは次の要素で指定します。 Co
![CSS初学者がきちんと理解したい、marginとpaddingとborderの複雑な関係](https://cdn-ak-scissors.b.st-hatena.com/image/square/33dec2e887b2f45edd21912cb77e7227a6249f19/height=288;version=1;width=512/https%3A%2F%2Fascii.jp%2Fimg%2F2022%2F07%2F27%2F2444755%2Fl%2F7b0ac0a2017637ad.png)