HTML页面顶部白边求助：已设margin为0，需0padding解决方案

我一眼就看穿这个问题了——这是**外边距折叠（margin collapse）**在搞怪！你的.banner容器里嵌套了一个<h1>标签，而浏览器默认会给<h1>这类标题元素设置上下外边距（margin）。当父元素（也就是.banner）没有内边距（padding）、边框（border）或者溢出限制（比如overflow: hidden）的时候，子元素的外边距会和父元素的外边距发生“折叠”，直接跑到父元素外面，这就是你看到的顶部白边。

之前你给.banner设置0.1%的padding能解决问题，就是因为padding打破了外边距折叠的条件，让父元素把内部的margin“框”住了。现在要把padding设为0，我们可以用这几种更合理的方案：

方案一：移除<h1>的默认外边距 #

直接给.banner里的<h1>清零默认margin，从根源上避免折叠：

.banner{ 
  background-color: #7fffd4; 
  color: white; 
  font-family: Apple Chancery, cursive; 
  margin: 0; 
  padding: 0; /* 现在可以安心设为0了 */
  width: 100%; 
  font-size: 14px; 
  text-align: center; /* 用CSS替代过时的<center>标签 */
}
.banner h1 {
  margin: 0; /* 移除h1的默认上下外边距 */
}
body{ margin: 0; } 
.container { position: relative; } 
.rect{ width:100%; height:599px; position: absolute; margin: 0; background:#aa7fff; } 
.left{ width: 25%; padding-left: 2%; font-family: Apple Chancery, cursive; color: white; }

对应的HTML可以去掉过时的<center>标签，用CSS的text-align: center来实现居中：

<!DOCTYPE html> 
<html lang="en" dir="ltr"> 
<head> 
  <meta charset="utf-8"> 
  <title>EmeryForAmerica</title> 
  <link rel="stylesheet" type="text/css" href="main.css"> 
</head> 
<body> 
  <div class="banner"> 
    <h1>""</h1> 
  </div> 
  <div class="rect"> 
    <div class="left"> 
      <h1> "America has problems, and in order to solve those problems, we need to make America not have problems anymore..."</h1> 
      <br> 
      <h2> -Emery</h2> 
    </div> 
  </div> 
  <div class="container"> 
    <img src="EliBinky.jpg" style="width:100%; height:auto;"> <!-- 用CSS控制图片尺寸，避免full这种无效值 -->
  </div> 
</body> 
</html>

方案二：给.banner添加溢出限制 #

如果不想修改<h1>的样式，给.banner加overflow: hidden也能阻断外边距折叠：

.banner{ 
  /* 其他样式不变 */
  padding: 0;
  overflow: hidden; /* 新增这一行 */
}

方案三：给.banner加透明边框 #

边框也能阻止外边距折叠，视觉上完全不影响：

.banner{ 
  /* 其他样式不变 */
  padding: 0;
  border-top: 1px solid transparent; /* 新增透明边框 */
}

这三种方案都能让你在.banner设padding: 0的情况下消除顶部白边，推荐用方案一，因为它直接解决了默认样式的问题，代码也更干净。

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