如何删除封闭标题和框边框之间的空白区域？

Question

HTML

<ASIDE><H2>Sample H2</H2>
Sample content.
</ASIDE>

CSS

ASIDE {border: darkkhaki solid medium;}
ASIDE H2 {background-color: darkkhaki;}

我希望这个显示为一个框，其标题位于框顶部的一个粗条中，与框边框的颜色相匹配，但我得到的是一个空格之间的间隙。 H2和盒子的顶部边框。我在多个浏览器中检查了这个，它是一样的。所以，这是标准行为，而不是特定浏览器的怪癖。如何消除H2和顶部边界之间出现的空白间隙？

这是jsfiddle link。

Answer 1

将margin-top: 0;添加到ASIDE H2 div以消除差距。

<强> CSS

ASIDE H2 {
  background-color: darkkhaki;
  margin-top: 0;
}

JSFiddle

Answer 2

这似乎是一个保证金问题。

修复非常简单。只需在CSS中的margin-top: 0添加ASIDE H2即可。

<强> HTML：

<ASIDE><H2>Sample H2</H2>
Sample content.
</ASIDE>

<强> CSS：

ASIDE {border: darkkhaki solid medium;}
ASIDE H2 {background-color: darkkhaki; margin-top: 0;}

JSFiddle