移除Box Model中body默认边距遇问题：顶部边距未生效求助

你遇到的不是body本身的边距没清掉，而是**外边距折叠（margin collapsing）**的问题：浏览器默认给<p>这类块级元素设置了margin-top，当第一个子元素的margin-top和父元素（body）的margin接触时，两者会合并成一个外边距，看起来像是body顶部还有边距，实际是p的margin“漏”到了body外面。

给你几个可行的解决办法：

• 直接移除第一个子元素的默认margin：给<p>设置margin-top: 0，这样就不会和body产生外边距折叠
• 给body加个“屏障”打破折叠：比如设置padding-top: 1px或者border-top: 1px solid transparent，让子元素的margin没法和body的margin直接接触
• 给body设置overflow: auto或overflow: hidden，这种属性会触发BFC（块级格式化上下文），从而阻止外边距折叠

修改后的代码示例（以移除p的margin-top为例）：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Box model</title>
  <style>
    html,
    body {
      margin: 0;
      padding: 0;
    }
    
    p,
    h1,
    ul {
      border: 1px solid rebeccapurple;
    }

    /* 移除p的默认顶部外边距 */
    p {
      margin-top: 0;
    }
  </style>
</head>

<body>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos aliquid blanditiis qui nisi quae recusandae possimus ipsam esse voluptatibus necessitatibus, dolorem provident omnis aperiam non quis! Blanditiis, eligendi. Vitae, sunt?
  </p>
  <h1>this is test</h1>
  <ul>
    <li>hi</li>
    <li>test val</li>
  </ul>
</body>

</html>

如果想一劳永逸解决这类默认样式问题，可以使用CSS重置（比如* { margin: 0; padding: 0; }），不过要注意这种全局重置可能会影响部分元素的默认布局，按需使用即可。

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