CSS盒模型详解 | AI生成和翻译
CSS 盒模型描述了网页中的每个元素如何被渲染为一个矩形框。它包含四层结构（而非三层），不过人们有时会将内边距+边框+外边距合并称为“间距”，从而简化为三层。但严格来说，正确的顺序包含四个独立部分。
以下是从内到外的准确结构：
-
内容区域
最内层：元素的实际文本、图像或其他内容。
通过width、height、font-size等属性控制。 -
内边距
元素内部的空间，位于内容与边框之间。
透明区域（继承元素背景）。
通过padding、padding-top、padding-right等属性控制。 -
边框
环绕内边距（和内容）的边界线。
通过border、border-width、border-style、border-color等属性控制。 -
外边距
最外层：位于边框外部的透明区域，用于与相邻元素隔开。
通过margin、margin-top等属性控制。
可为负值，且会发生外边距重叠。
从内到外的视觉顺序：
外边距（外部）
└─ 边框
└─ 内边距
└─ 内容区域（文本/图像等）
简易示意图：
+---------------------------+ ← 外边距
| 边框 |
| +---------------------+ | ← 边框
| | 内边距 | |
| | +---------------+ | |
| | | 内容 | | |
| | +---------------+ | |
| | | |
| +---------------------+ |
| |
+---------------------------+
常见的“三层”误解
部分教程会简化为：
- 内容
- 内边距/边框（合并为“内部间距+边缘”）
- 外边距
但根据官方CSS规范，技术上存在四个部分，且顺序固定：
内容 → 内边距 → 边框 → 外边距
这一顺序在计算元素总占用空间时至关重要（尤其涉及 box-sizing: content-box 与 box-sizing: border-box 的差异）。