h1–h6的默认margin是基于font-size的em相对值而非固定像素,如h1为0.67em、h2为0.75em、h3为0.83em、h4/h5/h6依次递增至1.67em,随父级字号动态变化且跨浏览器存在差异。

h1–h6 的默认 margin 不是固定像素值
浏览器对 h1 到 h6 施加的上下外边距(margin)是基于当前字体大小的相对单位,不是固定的 20px 或 16px。Chrome / Edge(Blink)中常见值如下(可在 DevTools 的 “Computed” 面板里实时验证):
-
h1:margin: 0.67em 0 -
h2:margin: 0.75em 0 -
h3:margin: 0.83em 0 -
h4,p,blockquote,ul等:margin: 1.12em 0 -
h5:margin: 1.5em 0 -
h6:margin: 1.67em 0
这些数值会随父元素 font-size 动态变化——比如父级设为 font-size: 20px,那 h1 的上下 margin 就是 0.67 × 20 = ~13.4px,不是整数,也不跨浏览器一致。
font-size 和 font-weight 是语义驱动的,不是装饰性设定
h1–h6 的字号和粗细由浏览器 UA stylesheet 按层级语义预设,例如:
-
h1:font-size: 2em,font-weight: bolder -
h2:font-size: 1.5em -
h3:font-size: 1.17em -
h4–h6: 依次递减,h6接近普通文本大小(~0.75em)
它们默认都是 display: block,独占一行;但不能靠改 h2 标签来实现“比 h1 更大”的视觉效果——这违背语义,且 SEO 和辅助技术会误判内容结构。
立即学习“前端免费学习笔记(深入)”;
ul/li 和 blockquote 的 padding/margin 容易被 reset 漏掉
重置样式时,很多人只清 margin,却忽略 ul 和 ol 的 padding-left: 40px(不是 margin!),也常漏掉 blockquote 的左右 margin: 40px。标题本身虽不带 padding,但和这些标签紧邻时,视觉间距会因它们的默认留白而失衡。
典型问题场景:
-
<h2>列表标题</h2><ul><li>项1</li></ul>—— 看起来标题和列表项之间空太大,其实是h2下边距 +ul上边距叠加 - 直接用
normalize.css或modern-normalize替代* { margin: 0; padding: 0; },能保语义、控差异
不同浏览器和系统对 h1–h6 的解析确实不一致
Firefox(Gecko)可能把 h1 默认 margin-top 设为 14px,而 Chrome(Blink)是 ~13.4px(按 16px 基准算),macOS 上还会受系统字体渲染影响行高与字重表现。这些差异在未重置样式时,会导致:
- 同一份 HTML 在不同环境里标题间距“看起来不一样”
- 用像素值硬写
margin修复某浏览器,反而在另一环境过紧或过松 -
em或rem单位比px更稳妥,但前提是根字号稳定
真正要解决的不是“查全所有默认值”,而是理解:这些值是动态的、非标准的、不可枚举的——所以别信网上流传的“统一表格”,打开 DevTools 看当前环境的真实 computed 值才是唯一可靠依据。



















