Css 中 margin 属性详细解析
写 css，你 少 不 了 与 margin 打 交 道 。你 真 的 了 解 margin 吗 ？ 你 知 道 margin 有 什 么 特
性 吗 ？ 你 知 道 什 么 是 垂 直 外 边 距 合 并 ？ margin 在 块 元 素 、 内 联 元 素 中 的 区 别 ？ 什 么 时 候 该
用 padding 而 不 是 margin？ 你 知 道 负 margin 吗 ？ 你 知 道 负 margin 在 实 际 工 作 中 的 用 途
吗 ？ 常 见 的 浏 览 器 下 margin 出 现 的 bug 有 哪 些 ？ ……
Margin 是什么
CSS 边 距 属 性 定 义 元 素 周 围 的 空 间 。 通 过 使 用 单 独 的 属 性 ， 可 以 对 上 、 右 、 下 、 左 的
外 边 距 进 行 设 置 。 也 可 以 使 用 简 写 的 外 边 距 属 性 同 时 改 变 所 有 的 外 边 距 。 — —W3School
边 界 ， 元 素 周 围 生 成 额 外 的 空 白 区 。 “空 白 区 ”通 常 是 指 其 他 元 素 不 能 出 现 且 父 元 素 背
景 可 见 的 区 域 。 — —CSS 权 威 指 南
我 比 较 喜 欢 使 用 “外 边 距 ”这 个 词 来 解 释 margin（ 同 理 padding 可 以 称 之 为 “内 边 距 ”，
但 是 我 又 恰 恰 喜 欢 称 呼 padding 为 “补 白 ”或 者 “留 白 ”） ， 我 们 可 以 很 清 楚 的 了 解 到 margin
的 最 基 本 用 途 就 是 控 制 元 素 周 围 空 间 的 间 隔 ， 从 视 觉 角 度 上 达 到 相 互 隔 开 的 目 的 。
Margin 的特性
margin 始 终 是 透 明 的 。 margin 通 过 使 用 单 独 的 属 性 ， 可 以 对 上 、 右 、 下 、 左 的 外 边
距 进 行 设 置 。 即 ： margin-top、 margin-right、 margin-bottom、 margin-left。
外 边 距 的 margin-width 的 值 类 型 有 ： auto | length | percentage。 也 可 以 使 用 简 写
的 外 边 距 属 性 同 时 改 变 所 有 的 外 边 距 ： margin: top right bottom left;(eg: margin:10px
20px 30px 40px) 记 忆 方 式 是 元 素 周 围 正 上 方 顺 时 针 “上 右 下 左 ”记 忆 。
并 且 规 范 还 提 供 了 省 略 的 数 值 写 法 ， 基 本 如 下 ：
1. 如 果 margin 只 有 一 个 值 ，表 示 上 右 下 左 的 margin 同 为 这 个 值 。例 如：margin:10px;
就 等 于 margin:10px 10px 10px 10px;
2. 如 果 margin 只 有 两 个 值 ， 第 一 个 值 表 示 上 下 margin 值 ， 第 二 个 值 为 左 右 margin
的 值 。 例 如 ： margin:10px 20px; 就 等 于 margin:10px 20px 10px 20px;
3. 如 果 margin 有 三 个 值 ， 第 一 个 值 表 示 上 margin 值 ， 第 二 个 值 表 示 左 右 margin 的
值 ， 第 三 个 值 表 示 下 margin 的 值 。 例 如 ： margin:10px 20px 30px; 就 等 于
margin:10px 20px 30px 20px;
4. 如 果 margin 有 四 个 值 ， 那 这 四 个 值 分 别 对 应 上 右 下 左 这 四 个 margin 值 。 例 如 ：
margin:10px 20px 30px 40px;
在 实 际 应 用 中 ，个 人 不 推 荐 使 用 三 个 值 的 margin，一 是 容 易 记 错 ，二 是 不 容 易 日 后 修
改 ，一 开 始 如 果 写 成 margin:10px 20px 30px;日 后 需 求 改 动 为 上 10px，右 30px，下 30px，
