使用<div>标签制作页眉时顶部出现白边的解决求助

嘿，我太懂这种刚入门被默认样式坑到的烦躁了！你已经把body和div的边距都清了，但漏掉了一个关键角色——<h1>标签本身自带默认的margin-top，这会触发CSS里的**外边距折叠（margin collapse）**现象：当父元素（你的.head div）没有边框、内边距或者overflow限制时，子元素的外边距会“穿透”父元素，看起来像是页面顶部有白边，但其实是h1的上边距跑到了父元素外面。

给你几个简单的解决方法，选一个适合你的就行：

方法1：直接清除h1的默认上边距 #

这是最直接的方式，针对问题元素解决：

.head h1 {
  margin-top: 0;
}

方法2：阻止父元素的外边距折叠 #

给你的.head div加一个小限制，就能挡住子元素的外边距：

.head {
  /* 二选一即可 */
  overflow: hidden; 
  /* 或者 padding-top: 1px; */
}

方法3：全局重置默认样式（推荐） #

如果不想以后再踩类似的坑，可以在CSS开头加一段全局重置代码，清除所有元素的默认边距和内边距：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* 这个还能让盒模型更直观 */
}

举个完整的示例，结合你的代码结构：

<body>
  <div class="head">
    <h1>websiteName</h1>
    <form>
      <label for="email">Email or Phone</label>
      <input type="email" name="email">
    </form>
  </div>
</body>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.head {
  background-color: #2c3e50; /* 加个背景色方便看效果 */
  color: white;
  padding: 1rem; /* 加内边距让内容不贴边 */
}
</style>

这样修改后，顶部的白边应该就彻底消失啦！

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