css - 为什么这个 CSS 布局导致包装器容器有上边距

Question

我的问题与这里的代码有关:http://codepen.io/anon/pen/zoYmZz

包装器 div 在标题 div 上方显示黄色背景(看起来像边距)。我很好奇为什么会这样。

我已尝试将两者的 margin 和 padding 设置为 0。实际上，我已经在代码中的每个元素上将其设置为 0:html、body、#header、#footer 等

黄色仍然显示。

但是，当我全局应用零边距和填充时，

* { margin: 0; padding: 0; }

这是可以避免的，我可以在包装容器上添加一些小的边距和填充，

#wrapper { margin-top: 10px; margin-bottom: 10px; }

与此代码笔一样:http://codepen.io/anon/pen/KNKGvz

我的问题是为什么会发生这种情况，以及如何在不使用猴子修补的情况下获得第二个代码笔的结果。

Answer 1

它是 h2 元素上的 margin。

h2 {
  margin: 0;
}

会修复它。