HTML/CSS顶部空白来源求助：运行代码后顶部出现莫名空白

嘿，我来帮你揪出这个顶部空白的元凶！先把你的代码贴出来方便分析：

.about { width: auto; display: inline-block; }
.about img { width: 60%; height: auto; display: block; margin: auto; }
h1 { margin: 0; padding: 0; }

<div class="main">
  <section id="top">
    <div class="top">
      <h1>text</h1>
      <h1>text</h1>
    </div>
  </section>
</div>

空白的来源 #

这个问题几乎都是浏览器默认的用户代理样式搞的鬼：

• 浏览器会给<body>标签默认添加margin: 8px（不同浏览器数值可能稍有不同），这部分边距就是你看到的顶部空白。
• 虽然你已经给h1设置了margin: 0; padding: 0;，但你没处理<body>的默认样式，所以空白依然存在。

解决办法 #

最简单直接的方案就是重置<body>的默认边距：

1. 在你的CSS里加上这一行：

body { margin: 0; padding: 0; }

2. 如果你想更彻底地避免这类默认样式问题，可以添加一个基础的全局重置（可选）：

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

这个通配符选择器会把所有元素的默认内外边距都清零，同时统一盒模型，能避免很多类似的布局小坑。

修改后的完整代码示例：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.about { width: auto; display: inline-block; }
.about img { width: 60%; height: auto; display: block; margin: auto; }
h1 { margin: 0; padding: 0; }

<div class="main">
  <section id="top">
    <div class="top">
      <h1>text</h1>
      <h1>text</h1>
    </div>
  </section>
</div>

这样运行后，顶部的空白就会消失啦～

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