すべての要素は箱でできている

ブラウザはすべてのHTML要素を四角い箱（ボックス）として扱います。箱の内側の余白がpadding、枠線がborder、外側の余白がmarginです。

レイアウト崩れの原因のほとんどは余白

「思った位置に置けない」「隙間が空きすぎる」といったレイアウトの悩みは、ボックスモデルを理解すると自分で解決できるようになります。ブラウザの開発者ツールで箱を可視化する方法も学びます。

学ぶ目的

margin・padding・borderを意図通りにコントロールし、整った余白のページを作れるようになることが目的です。

• すべての要素は箱（ボックス）である
• margin・padding・borderの違い
• widthとheightの指定