Wie entferne ich leeren Platz zwischen einem eingeschlossenen Header und einem Rahmen?

Question

HTML

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

CSS

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

Ich will das an der Spitze der Box in einem dicken Balken mit der Überschrift als Kästchen angezeigt werden, die die Farbe der Spiele Box-Grenze, aber was ich stattdessen bekomme, ist eine Lücke von Leerzeichen zwischen dem H2 und dem oberen Rand der Box. Ich habe dies in mehreren Browsern überprüft, und es ist das gleiche. Das ist Standardverhalten, nicht die Eigenart eines bestimmten Browsers. Was kann ich tun, um die Leerraumlücke zwischen der H2- und der oberen Grenze zu entfernen?

Hier ist ein jsfiddle link.

Answer 1

Fügen Sie margin-top: 0; zu Ihrem ASIDE H2 div hinzu, um die Lücke zu entfernen.

CSS

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

JSFiddle

Answer 2

Dies scheint eine Marge Thema.

Die Lösung ist sehr einfach. Fügen Sie einfach einen margin-top: 0 zu Ihrem ASIDE H2 in Ihrem CSS hinzu.

HTML:

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

CSS:

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

JSFiddle