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

Question

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

包装器 div 在 header div 上方显示黄色背景（看起来像空白）。我很好奇为什么会这样。

我已经尝试将 margin 和 padding 都设置为 0。实际上，我已经在代码中的每个元素上将其设置为 0：html, body, #header, #footer, etc

黄色仍然显示。

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

* { margin: 0; padding: 0; }

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

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

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

我的问题是为什么会这样，如果没有 monkey-patching 我怎样才能得到第二个 codepen 的结果。

Answer 1

这是 h2 元素上的 margin。

h2 {
  margin: 0;
}

会修复它。