HPBUILD

CSSでレイアウトを整える際、「余白の調整」で悩んだことはありませんか？
そんなときに理解しておきたいのが ボックスモデル です。この記事では、padding・border・marginの違いを中心に、ボックスモデルの基本をやさしく解説します。

HTMLの各要素は、見た目上「四角い箱（ボックス）」として扱われます。
このボックスは、以下の4つの層から構成されています：

以下のコードで、各プロパティがどの部分を意味しているか確認できます。

.box {
  width: 300px;
  padding: 20px;
  border: 2px solid #333;
  margin: 30px;
}

コンテンツ（文字や画像）と枠線の間にスペースを作ります。

.example {
  padding: 20px;
}

ボックスを囲む線。太さ・色・線種を指定できます。

.example {
  border: 1px solid #333;
}

隣り合う要素との間にスペースを作ります。

.example {
  margin: 30px;
}

デフォルトでは、widthにはpaddingとborderは含まれません。
つまり、指定した幅よりも実際の表示は大きくなります。

この違いを解消するためには、以下の指定をすると便利です：

* {
  box-sizing: border-box;
}

box-sizing: border-boxを指定すると、widthにpaddingやborderも含めてくれるため、意図したサイズ調整がしやすくなります。

ボックスモデルはCSSレイアウトの基礎です。
padding、border、marginの違いを理解しておくことで、より思い通りのデザインが作れるようになります。

次回は「横並びにする方法（Flexbox）」や「ボックスの中央寄せ」など、実践的なレイアウトテクニックをご紹介します！

HPBULID