CSS 理解盒模型

Begindev 编辑部 March 25, 2026

CSS 盒模型 (Box Model) 是理解网页元素如何渲染的基础。本质上，它将每个 HTML 元素描述为一个矩形盒子。

本章将把盒模型分解为其核心组件：内容 (Content)、内边距 (Padding)、边框 (Border) 和 外边距 (Margin)，解释它们如何共同决定元素的整体尺寸和外观。

1. CSS 盒模型：深度解析

CSS 盒模型规定了元素的不同部分如何相互作用以创建网页上的最终视觉呈现。这些组件就像洋葱一样层层包裹。

1.1 内容 (Content)

内容是盒模型的最内部部分。它代表元素显示的实际文本、图像或其他媒体。内容区域的尺寸通常由 width (宽度) 和 height (高度) 属性决定（我们将在下一章中详细探讨）。

示例：
考虑一个包含文本 "Hello, world!" 的 <div> 元素。 "Hello, world!" 文本就是内容。

<div>Hello, world!</div>

默认情况下，内容会扩展以填充其父元素的可用宽度。如果内容超过指定高度，它会溢出（我们将在后面的模块中介绍如何处理溢出）。

1.2 内边距 (Padding)

内边距是内容和边框之间的空间。它在内容周围创建一个缓冲区，防止内容直接接触边框。

内边距由 padding 属性控制，可以为元素的四个边设置，也可以使用 padding-top、padding-right、padding-bottom 和 padding-left 单独设置。

示例：
给上面的 <div> 元素添加内边距：

div {
  padding: 20px; /* 所有四个边添加 20px 的内边距 */
}

这将在 "Hello, world!" 文本和边框（如果有）或 <div> 元素的边缘之间创建 20 像素的空间。

单独的内边距属性设置：

div {
  padding-top: 10px;    /* 上内边距 */
  padding-right: 15px;  /* 右内边距 */
  padding-bottom: 20px; /* 下内边距 */
  padding-left: 25px;   /* 左内边距 */
}

为 <div> 元素的每一边设置了不同的内边距值。

简写属性 (Shorthand)：
你可以使用简写符号来设置内边距值（顺时针方向：上、右、下、左）：

padding: 10px; (四边均为 10px)
padding: 10px 20px; (上下 10px，左右 20px)
padding: 10px 20px 30px; (上 10px，左右 20px，下 30px)
padding: 10px 20px 30px 40px; (上 10px，右 20px，下 30px，左 40px)

1.3 边框 (Border)

边框是包围内边距和内容的线条。它为元素提供视觉边界，可以设置不同的颜色、宽度和样式。border 属性是设置 border-width、border-style 和 border-color 的简写。

示例：

div {
  border: 2px solid black; /* 2px 宽，黑色实线边框 */
}

单独的边框属性：

border-width: 指定边框的粗细 (例如 1px, thick)。
border-style: 指定边框的样式 (例如 solid(实线), dashed(虚线), dotted(点线), none(无))。
border-color: 指定边框的颜色。

简写边框：
类似于内边距，你可以分别为每一侧设置边框：

div {
  border-top: 2px solid red;
  border-right: 1px dashed blue;
  border-bottom: 3px dotted green;
  border-left: 4px double purple;
}

1.4 外边距 (Margin)

外边距是边框外部的空间。它在元素与其相邻元素之间产生间隔。外边距是透明的，也就是说它不接受背景颜色。

示例：

div {
  margin: 30px; /* 所有四个边添加 30px 的外边距 */
}

这将在 <div> 与任何相邻元素之间创建 30 像素的空间。

单独的外边距属性设置：

div {
  margin-top: 10px;
  margin-right: 15px;
  margin-bottom: 20px;
  margin-left: 25px;
}

为 <div> 的每一边设置了不同的外边距值。

外边距简写属性

外边距的简写写法与内边距相同：

margin: 10px; (所有四个边均为 10px)
margin: 10px 20px; (上下为 10px，左右为 20px)
margin: 10px 20px 30px; (上为 10px，左右为 20px，下为 30px)
margin: 10px 20px 30px 40px; (上、右、下、左，按此顺序)

外边距合并 (Margin Collapsing)：
理解外边距的一个关键概念是外边距合并。当两个垂直相邻的块级元素的上下外边距相遇时，它们会合并成一个外边距，其大小等于两个外边距中较大的那一个，而不是两者的总和。注意：这仅适用于垂直方向。

示例：

<div style="margin-bottom: 20px;">第一个 div</div>
<div style="margin-top: 30px;">第二个 div</div>

在这种情况下，两个 <div> 之间的距离将是 30px，而不是 50px。

1.5 盒模型图解

盒模型示意图解

2. 实战示例与演示

2.1 示例 1：简单的个人资料卡片

想象你正在为一个网站创建一个简单的用户资料卡片。

HTML:

<div class="profile-card">
  <img src="avatar.jpg" alt="用户头像">
  <h3>John Doe</h3>
  <p>关于 John Doe 的简短简介。</p>
</div>

CSS:

.profile-card {
  width: 300px;      /* 内容宽度 */
  padding: 20px;     /* 内容与边框之间的空间 */
  border: 1px solid #ccc; /* 微妙的灰色边框 */
  margin: 20px;      /* 卡片周围的空间 */
}
.profile-card img {
  width: 100px;
  height: 100px;
  border-radius: 50%; /* 让头像变圆 */
  margin-bottom: 10px; /* 头像与名字之间的空间 */
}
.profile-card h3 {
  margin-bottom: 5px; /* 名字与简介之间的空间 */
}

在此示例中，我们使用了盒子模型属性来控制个人资料卡片及其元素的大小、间距和外观。

width 属性设置了卡片的内容宽度。
padding 属性在卡片内部的内容周围添加了空间。
border 属性创建了一个视觉边界。
margin 属性在卡片周围添加了空间，将其与页面上的其他元素隔开。

2.2 示例 2：设置导航菜单样式

考虑一个水平导航菜单：

HTML：

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

CSS:

nav ul {
  list-style: none; /* 移除圆点 */
  margin: 0;        /* 移除默认外边距 */
  padding: 0;       /* 移除默认内边距 */
  background-color: #333;
}
nav li {
  display: inline-block; /* 让列表项水平排列 */
}
nav a {
  display: block;   /* 让链接填满列表项 */
  color: white;
  text-decoration: none;
  padding: 14px 16px; /* 增加点击区域大小 */
}
nav a:hover {
  background-color: #ddd;
  color: black;
}

在此示例中，我们使用了盒子模型 (Box Model) 属性来控制导航菜单项的间距和外观。

padding 属性在每个链接内的文本周围添加了空间。
margin 属性（在此例中设置为 0）移除了 <ul> 元素周围的默认间距。