Chrome / Edge（Blink）里最常踩坑的默认 margin 和 padding

先说说那些最常见的布局问题。你猜是怎么来的？其实，绝大多数布局的“翻车”点，都集中在少数几个标签的默认外边距上：

• 到
  ：上下 margin 通常为 0.67em / 0.83em。注意，这不是固定的像素值，而是基于当前 font-size 动态计算的。

• ：上下 margin 大约 1em，左右为 0。
• 、
  ：顶部 margin 大约 1em，左侧 padding-left: 40px。注意这个 40px 是内边距，不是外边距，很多简单的 reset 方案会漏掉它。

• ：左右 margin 大约 40px，顶部底部也有 margin。

• ：自带 white-space: pre 和 margin: 1em 0。

至于这些值的真实数值，最靠谱的办法是在 Chrome DevTools 的 “Computed” 面板里直接查看。别信那些“固定16px”的网传说法，一查一个准。

display 类型不统一，直接导致盒模型行为突变

再来看另一个让人头疼的问题：display 类型。比如 默认是 inline，但 在 Blink 中却是 inline-block； 默认 display: inline，却会触发基线对齐（baseline），结果父容器下方莫名其妙多出一段留白。这还真不是 bug，而是规范行为。

• 、、：默认 display: inline-block，所以可以设置 width 和 height。
• 及其子元素（、

  ）：强制使用表格布局，display 为 table 系列，别想着直接用 flex 控制它们。 ：默认 display: block，但内部的 却是 display: list-item（还带一个默认的 marker）。 查 display 类型，最稳的方式还是选中元素 → Elements 面板 → 右侧 Styles 标签页 → 底部 “Computed” → 找 display 行。明白这点，就能省下不少排查时间。 font-size 和 line-height 依赖用户系统设置 这部分更关键。你知道吗， 的大小并不是固定的缩小80%，而是相对于当前上下文的 font-size 计算； 的 font-size 在 Chrome macOS 上可能是 2em，可到了 Windows 上却是 1.8em。原因很简单，底层用了 system-ui 字体栈，不同系统的默认字号本来就不一样。 默认 font-size: 16px？这个判断只在用户没改过浏览器默认字号时才成立。很多人会调到18px甚至更大。 和 的 font-size 默认继承自 body，但部分浏览器会强制一个最小字号（比如 iOS Safari 会强制 ≥16px 来防止缩放）。 line-height 对 这类块级元素默认是 normal（大约1.2），但实际渲染值完全取决于当前字体的度量，根本无法跨字体复现。 所以，靠 em 或 rem 来做精确的行高控制时，一定要配合 font-family 锁定。否则用户一换字体，行高就跑了，跟没拴绳的狗一样。 reset.css 和 modern-normalize 的关键差异点 说到重置方案，别再用那种老掉牙的 * { margin: 0; padding: 0; } 全局重置了。它直接把 的边框撑开逻辑、 的语义分隔意义全给干掉了，简单粗暴却后患无穷。 normalize.css 的核心思路是“保留有意义的默认行为”。比如 、 的 vertical-align，以及 的宽高比例，这些都能正常运作，只去修正跨浏览器的不一致。 modern-normalize 则更激进一些。它会移除 的默认 border（Blink 里是 2px outset），还会重置 的圆角和清除按钮样式。 如果你真的要对某个元素“彻底清空”，优先用 all: unset。但要注意兼容性：IE 不支持，iOS Safari ≤15.4 也有 bug。 最稳妥的做法是：项目初期就定好基调，用 modern-normalize 或 sanitize.css 来处理默认样式，而不是后期靠一堆补丁硬怼。默认样式背后的连锁反应，比你表面看到的要多得多。