html / css真的很困惑顶部白色空间来自哪里

Question

＆＃13;

＆＃13;

.about {
  width: auto;
  display: inline-block;
}

.about img {
  width: 60%;
  height: auto;
  display: block;
  margin: auto;
}

h1 {
  margin: 0;
  padding: 0;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

所以我只是自己运行它，我随机得到它 here

＆＃13;

＆＃13;

.about {
  width: auto;
  display: inline-block;
}

h1 {
  margin: 0;
  padding: 0;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

然后我删除整个＆＃34;。关闭img＆＃34;部分和white space at the top

如果我删除.about img里面的所有内容并不重要，白色空间就在那里。如果我删除整个.about img。

，白色空间才会消失

即使我删除了h1，.about或单词＆＃34; img＆＃34;，或者字面上的其他所有内容，白色空间仍然存在。

正如你所看到的，我的html没有使用about类（我做了，但我评论/删除了它们）

我真的很想解释为什么当我的html甚至没有使用.about或img时，删除＆＃34; .about img＆＃34;部分摆脱空格，以及为什么删除其他内容并不会改变任何内容。

注意：我已经尝试了通用选择器，它能够使白色空间消失，但​​我真的很好奇为什么＆＃34;。关于img＆＃34;影响空间。对不起，如果这很明显或。

注2：我也尝试过将margin：0添加到top和main，但没有一个删除空格。

谢谢！