何雨果的知识库

Appearance

CSS 盒模型：Margin、Padding 与 Border ​

CoreCSS Layout

每个 HTML 元素在页面上都被视为一个 矩形盒子。盒模型定义了这个盒子的四个层次：Content → Padding → Border → Margin，是 CSS 布局的基石。

一、📦 盒模型概览 ​

从内到外：

┌─────────────── Margin ────────────────┐
│ ┌──────────── Border ───────────────┐ │
│ │ ┌────────── Padding ────────────┐ │ │
│ │ │ ┌──────── Content ──────────┐ │ │ │
│ │ │ │                           │ │ │ │
│ │ │ │   width × height          │ │ │ │
│ │ │ │                           │ │ │ │
│ │ │ └───────────────────────────┘ │ │ │
│ │ └───────────────────────────────┘ │ │
│ └───────────────────────────────────┘ │
└───────────────────────────────────────┘
层说明方向
Content元素的实际内容区域—
Padding内容与边框之间的 内间距向内扩展
Border盒子的 边框线向外扩展
Margin边框与外部元素之间的 外间距向外扩展

关键理解

width 和 height 属性默认只设置 Content 区域的尺寸。Padding 和 Border 会在此基础上 额外增加 盒子的总占用空间。

二、📐 Width 与 Height ​

css
div {
  width: 200px;    /* 内容区宽度 */
  height: 200px;   /* 内容区高度 */
}
  • 可以使用 像素 (px) 或 百分比 (%)
  • 百分比是相对于 父元素 的宽度
css
div { width: 100%; }  /* 占满父元素的整个宽度 */

三、🖼️ Border（边框） ​

3.1 简写语法 ​

border 属性接受 三个值，用空格分隔：

css
div {
  border: 10px solid black;
  /*      粗细    样式   颜色  */
}
值说明可选项
粗细边框线的宽度1px、5px、30px 等
样式边框线的类型solid（实线）、dashed（虚线）、dotted（点线）等
颜色边框的颜色命名色、Hex 码

3.2 单边控制（border-width） ​

css
/* 四值语法：上 → 右 → 下 → 左（顺时针） */
border-width: 0px 20px 0px 20px;

/* 双值语法：上下 | 左右 */
border-width: 0px 20px;

也可以用单独属性覆盖某一边：

css
border: 30px solid black;  /* 先设置四边 */
border-top: 0px;           /* 再覆盖顶部（必须写在后面） */

书写顺序

单边覆盖必须写在简写属性 之后，否则会被简写覆盖。

四、🔲 Padding（内间距） ​

Padding 是 内容 与 边框 之间的空间：

css
div {
  padding: 20px;  /* 四边各 20px */
}

多值语法 ​

css
/* 四值：上 右 下 左 */
padding: 0px 10px 20px 30px;

/* 双值：上下 | 左右 */
padding: 10px 40px;

/* 单值：四边相同 */
padding: 20px;
  • Padding 不改变 content 的 width/height
  • Padding 会将 border 向外推
  • Padding 区域会继承元素的背景色

五、📏 Margin（外间距） ​

Margin 是 边框 与 其他元素 之间的空间：

css
div {
  margin: 10px;  /* 四边各 10px */
}

多值语法 ​

与 Padding 完全一致：

css
/* 四值：上 右 下 左 */
margin: 0px 10px 20px 30px;

/* 双值：上下 | 左右 */
margin: 10px 40px;

Margin 折叠（Margin Collapse） ​

当两个垂直相邻的元素各有 margin 时，它们之间的间距不是两个 margin 之和，而是取 较大值：

css
/* 元素 A: margin-bottom: 20px */
/* 元素 B: margin-top: 10px */
/* 实际间距 = max(20, 10) = 20px，而非 30px */

水平方向不折叠

Margin 折叠仅发生在 垂直方向（上下），水平方向的 margin 会正常叠加。

六、📊 多值语法总结 ​

Padding、Margin、Border-width 共用相同的多值规则：

值数量含义示例
1 个值四边相同padding: 10px;
2 个值上下 | 左右padding: 10px 20px;
3 个值上 | 左右 | 下padding: 10px 20px 30px;
4 个值上 → 右 → 下 → 左（顺时针）padding: 10px 20px 30px 40px;

七、📦 Div 元素（Content Division） ​

7.1 什么是 Div ​

<div> 是一个 通用容器元素，本身 无语义、无样式，唯一作用是 分组内容 以便于 CSS 样式化和布局：

html
<div>
  <p>Morning World</p>
  <img src="day.jpg" alt="Daytime" />
</div>

<div>
  <p>Evening World</p>
  <img src="night.jpg" alt="Nighttime" />
</div>

7.2 Div 的用途 ​

用途说明
分组内容将相关元素包裹在一起
统一样式对一组元素应用相同的背景色、边框、间距
布局容器作为 Flex / Grid 布局的容器

7.3 Pesticide Chrome 扩展 ​

由于 <div> 默认不可见，调试布局时推荐安装 Pesticide Chrome 扩展：

  • 激活后会为所有元素添加彩色边框轮廓
  • 按住 Ctrl 悬停可查看元素类型、类名和 ID
  • 帮助快速诊断盒模型和对齐问题

八、🧮 盒子总尺寸计算 ​

默认情况下（box-sizing: content-box），元素的 实际占用宽度 为：

总宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

示例计算：

css
div {
  width: 200px;
  padding: 20px;
  border: 10px solid black;
}
实际宽度 = 10 + 20 + 200 + 20 + 10 = 260px

box-sizing: border-box

设置 box-sizing: border-box 后，width 和 height 会 包含 padding 和 border，使尺寸计算更直观。这是现代 CSS 开发的常见做法：

css
* { box-sizing: border-box; }

九、📚 参考资源 ​

← 返回 Web 开发研究