CSS设置overflow:scroll后文本顶部出现多余换行如何解决

问题成因 #

该现象由浏览器默认样式和块格式化上下文（BFC）的特性共同导致：

• 浏览器默认样式中<p>标签自带margin-top属性（默认值通常为1em）。
• 当.scroll容器未设置overflow: scroll时，overflow默认值为visible，容器不会创建独立BFC，<p>的margin-top会和容器顶部发生外边距塌陷，这个边距会溢出到容器外部，因此容器内部看不到文本上方的空白。
• 给容器添加overflow: scroll后，容器会触发创建独立BFC，BFC内部的外边距不会和外部发生塌陷，<p>自带的margin-top就会在容器内部生效，也就出现了仅文本区域上方有多余空白的现象。

解决方法 #

可任选以下一种方案修复：

1. 直接清除<p>标签的默认顶部边距，这是最直接无副作用的方案：

p {
  margin-top: 0;
}

2. 若不想修改<p>的全局默认样式，可将文本标签换成无默认外边距的行内元素（比如<span>）。
3. 也可以给.scroll容器添加1px的顶部内边距，阻断外边距塌陷：

.scroll {
  padding-top: 1px;
}

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