戻る
ボックスモデルを理解する
CSSでは、各要素をボックスと呼ばれる四角形の概念で取り扱います。ボックスは、次の4つの領域から構成されます。
マージン、パディングはそれぞれ余白として機能しますが、役割は明確に異なります。これらの関係をしっかり理解することで、思い通りのレイアウトを作成することができます。
マージン
要素のボーダーと他の要素との間の余白のことです。背景は常に透明のため、親要素の背景に依存します。
ボーダー
パディングの周囲にある枠線です。
パディング
内容とボーダーの間のスペースです。
内容
要素に含まれる内容です。この幅と高さを、wih3hプロパティ・heightプロパティで設定できます。
