CSSでレイアウトを整える際、「余白の調整」で悩んだことはありませんか？ そんなときに理解しておきたいのが ボックスモデル です。この記事では、padding・border・marginの違いを中心に、ボックスモデルの基本をやさしく解説します。 ボックスモデルとは？ HTMLの各要素は、見た目上「四角い箱（ボックス）」として扱われます。 このボックスは、以下の4つの層から構成されています： Content（内容）：文字や画像などの本体部分 Padding（内側の余白）：内容と枠の間の余白 Border（枠線）：ボックスの境界線 Margin（外側の余白）：ボックス同士の間隔 ボックスモデルの構造イメージ 以下のコードで、各プロパティがどの部分を意味しているか確認できます。 コピー .box { width: 300px; padding: 20px; border: 2px solid #333; margin: 30px; } それぞれの役割を詳しく見る ① padding：内側の余白 コンテンツ（文字や画像）と枠線の間にスペースを作ります。 コピー .example { padding: 20px; } ② border：枠線 ボックスを囲む線。太さ・色・線種を指定できます。 コピー .example { border: 1px solid #333; } ③ margin：外側の余白 隣り合う要素との間にスペースを作ります。 コピー .example { margin: 30px; } ボックスサイズの注意点 デフォルトでは、widthにはpaddingとborderは含まれません。 つまり、指定した幅よりも実際の表示は大きくなります。 この違いを解消するためには、以下の指定をすると便利です： コピー * { box-sizing: border-box; } box-sizing: border-boxを指定すると、widthにpaddingやborderも含めてくれるため、意図したサイズ調整がしやすくなります。 おわりに ボックスモデルはCSSレイアウトの基礎です。 padding、border、marginの違いを理解しておくことで、より思い通りのデザインが作れるようになります。 次回は「横並びにする方法（Flexbox）」や「ボックスの中央寄せ」など、実践的なレイアウトテクニックをご紹介します！
タグ: margin
