为何给p元素设置1px垂直外边距会出现滚动条？

问题复现 #

p元素无外边距时：

body {
  width: 100vw;
  height: 100vh;
  margin: 0;
}

p {
  margin: 0 0;
}

<!DOCTYPE html>
<html>
<body>
  <p>p</p>
</body>
</html>

p元素有外边距时：

body {
  width: 100vw;
  height: 100vh;
  margin: 0;
}

p {
  margin: 1px 0;
}

<!DOCTYPE html>
<html>
<body>
  <p>p</p>
</body>
</html>

原因分析 #

这是垂直外边距折叠和height:100vh固定高度共同导致的：

1. body设置height:100vh后，高度被固定为当前视口的精确高度，同时margin:0移除了自身默认外边距。
2. 由于body没有设置border、padding或触发BFC的属性（如overflow:hidden），子元素p的垂直外边距会“穿透”父元素body，直接作用在文档层面。
3. 此时整个文档的总高度变为100vh + 1px（margin-top） + 1px（margin-bottom），超出了视口高度，浏览器因此显示垂直滚动条。

解决方法 #

可以通过以下任意一种方式阻止外边距穿透：

• 给body添加padding: 1px（或任意非零值），让父元素的内边距包裹子元素的外边距：

  body {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 1px;
  }
  

• 给body设置border: 1px solid transparent，利用边框阻止外边距折叠：

  body {
    width: 100vw;
    height: 100vh;
    margin: 0;
    border: 1px solid transparent;
  }
  

• 给body添加overflow: hidden，触发块级格式化上下文（BFC），让父元素完全包含子元素的外边距：

  body {
    width: 100vw;
    height: 100vh;
    margin: 0;
    overflow: hidden;
  }
  

• 将body的height:100vh改为min-height:100vh，让父元素高度自适应内容，避免固定高度限制：

  body {
    width: 100vw;
    min-height: 100vh;
    margin: 0;
  }
  

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