CSS技术求助：为何font-size被当作margin？h1外边距未塌陷

1. 段落的3.5rem margin来自哪里？ #

你并没有把font-size当作margin使用，这个35px（3.5rem）的外边距是浏览器默认的用户代理样式自动给<p>元素加上的。绝大多数浏览器都会给段落标签设置默认的上下外边距，通常是基于元素自身font-size的em值（比如Chrome默认是margin: 1em 0）。你的<p>设置了font-size:25px，如果浏览器默认margin是1.4em的话，25×1.4=35px，刚好对应你看到的3.5rem（因为你给html设置了font-size:62.5%，1rem等价于10px）。

2. 为什么h1的margin-bottom没“生效”，也没发生外边距塌陷？ #

外边距塌陷其实已经发生了，只是结果和你的预期不符。当相邻块级元素的上下外边距相遇时，最终的间距会取两个值里的较大者：

• 你给h1设置的margin-bottom:1rem（对应10px）
• p的默认margin-top是35px
• 塌陷后最终间距是35px，所以看起来h1的margin-bottom像是没生效，但实际上是被更大的p的默认margin-top覆盖了。

解决办法 #

如果你想按预期控制间距，有两种常用方式：

• 方式一：重置p的默认margin，手动设置你需要的值，比如让p的上边距和h1的下边距一致，这样塌陷后就是你想要的1rem：

p {
  font-size: 25px;
  margin: 1rem 0; /* 替换浏览器默认margin */
}

• 方式二：禁用外边距塌陷，比如给其中一个元素添加border/padding，或者用display: flow-root包裹元素，但这种方式仅在需要保留两个元素原有外边距时使用，一般不推荐。

额外提示 #

你用html {font-size:62.5%}来让1rem等价于10px的技巧没问题，但要注意浏览器默认样式的单位多为em，会基于元素自身的font-size计算，很容易出现这种“意料之外”的间距，建议重置全局默认样式（比如用* {margin:0;padding:0;}或者Normalize.css）来避免此类问题。

内容的提问来源于stack exchange，提问作者Yuri Amancio