如何消除网页顶部与Header间的空白/边框以优化视觉效果？

出现顶部空白主要是两个原因：浏览器默认给body加了边距，以及Header内部h1的默认外边距触发了外边距折叠。按以下方法修改即可解决：

1. 重置body的默认边距 #

大部分浏览器会给body设置默认的margin（通常是8px），这是顶部空白的常见来源。在CSS里添加：

body {
  margin: 0;
  padding: 0;
}

2. 处理Header内部元素的外边距折叠 #

Header里的h1自带默认的margin-top，会和Header的外边距折叠，导致顶部仍有空白。两种解决方式选其一即可：

• 方式一：给Header添加overflow: hidden，阻断外边距折叠

  .header {
    /* 保留原有样式 */
    overflow: hidden;
  }
  

• 方式二：直接移除h1的默认上边距

  .header h1 {
    margin-top: 0;
  }
  

修改后的完整代码示例 #

body {
  margin: 0;
  padding: 0;
}

#mainstyle {
  background-color: blue;
  color: white;
  text-align: center;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.header {
  padding: 90px;
  margin: 0px;
  background-color: black;
  text-align: center;
  color: white;
  font-size: 30px;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  overflow: hidden;
}

.header h1 {
  margin-top: 0;
}

<div class="header">
  <h1>Header</h1>
  <p>My supercool header</p>
</div>

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