ボックスモデル — すべての要素は箱

見えないけど、すべては箱でできている

Webページを見ると、文字も画像もボタンもバラバラの形に見えます。でも裏側では、CSSはすべての要素（エレメント）を「四角い箱」として扱っています。丸いボタンでさえ、実は四角い箱の角を丸めているだけです。この考え方をボックスモデルと呼びます。

箱の四つの層

一つの箱は、内側から外側へ向かって次の四つでできています。

1. content(中身) … 文字や画像そのもの。ダンボールの中の荷物
2. padding(内側の余白) … 中身と枠線のあいだの隙間。荷物を守る緩衝材
3. border(枠線) … 箱の壁。太さ・色・線の種類を決められる
4. margin(外側の余白) … 箱と、隣の箱とのあいだの隙間

.card {
  padding: 16px;
  border: 1px solid gray;
  margin: 24px;
}

この border の書き方は「太さ・線の種類・色」を空白区切りで並べたものです。1px solid gray は「1pxの実線で灰色」という意味。AIが生成したCSSでよく出てくる形なので、順番の意味を知っておくと読めます。

余白トラブルはまずボックスを疑う

「なんか隙間が広すぎる」「ボタンが窮屈」といった見た目の不満は、たいてい padding か margin の数値が原因です。AI生成CSSを直すときも、まずこの二つを探すのが近道です。

.btn {
  padding: 0;
}

.btn {
  padding: 12px 20px;
}