CSS 盒模型是什么？

Question

CSS 盒模型是什么？

Accepted Answer

CSS 中的每个元素都是一个矩形**盒**，由四个层组成，从内向外依次为：**content**、**padding**、**border** 和 **margin**。理解它们如何组合是所有布局的基础。

```text
┌─────────────── margin ───────────────┐  ← space OUTSIDE, between elements
│  ┌──────────── border ────────────┐  │
│  │  ┌───────── padding ────────┐  │  │  ← space INSIDE, around content
│  │  │       content            │  │  │  ← text/image (width × height)
│  │  └──────────────────────────┘  │  │
│  └─────────────────────────────────┘  │
└────────────────────────────────────────┘
```

```css
.box {
  width: 200px;      /* content width (in the default box model) */
  padding: 20px;     /* inner spacing — pushes content inward */
  border: 5px solid; /* the visible edge */
  margin: 10px;      /* outer spacing — separates from neighbors */
}
```

## 为什么这很重要

使用**默认**的 `box-sizing: content-box` 时，渲染的宽度*大于*你设置的 `width`，因为 padding 和 border 会添加在上面：

```text
Total width = 200 (content) + 2×20 (padding) + 2×5 (border) = 250px
```

这让初学者感到惊讶——你设置了 `width: 200px`，但它占用了 250px。大家都用这个解决方案：

```css
* { box-sizing: border-box; } /* now width INCLUDES padding + border → 200px total */
```

## padding 与 margin 的区别

- **padding** — border *内部*的空间；它是元素的一部分（可点击，继承背景颜色）。
- **margin** — border *外部*的空间；透明的，且相邻的垂直 margin **会折叠**（两个相邻 margin 中较大的获胜）。

## 为什么这很重要

盒模型决定了元素的实际大小以及它们之间的间距。

了解默认模型如何将 padding/border 添加到 `width` 中（以及为什么 `border-box` 是几乎通用的解决方案）可以防止最常见的布局尺寸混淆。