CSS 盒模型是网页布局的核心概念，由 内容区域、内边距、边框 和 外边距 四部分组成。理解它能帮助你更精准地控制元素尺寸和间距。

盒模型结构

  1. 内容区域 (content)
    元素本身的宽度和高度，如 width: 200px;

    css_box_model_content

  2. 内边距 (padding)
    内容与边框之间的空白，如 padding: 10px;

    css_box_model_padding

  3. 边框 (border)
    包围内容和内边距的线条，如 border: 2px solid #000;

    css_box_model_border

  4. 外边距 (margin)
    元素与相邻元素之间的空白，如 margin: 15px;

    css_box_model_margin

示例代码

.box {
  width: 200px; /* 内容区域 */
  padding: 10px; /* 内边距 */
  border: 2px solid #333; /* 边框 */
  margin: 15px; /* 外边距 */
}

⚠️ 注意：总宽度 = width + padding * 2 + border * 2
如果使用 box-sizing: border-box;，总宽度将包含所有内部样式。

扩展阅读

想深入学习CSS布局技巧？可以参考本站的 CSS布局教程 页面。