囲まれた見出しとボックスの枠線の間の空白を削除するにはどうすればよいですか？

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

ASIDE H2 divにmargin-top: 0;を追加してギャップを削除してください。

CSS

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

JSFiddle

Answer 2

これは、マージンの問題のようです。

修正は非常に簡単です。 CSSのASIDE H2にmargin-top: 0を追加するだけです。

HTML：

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

CSS：

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

JSFiddle