H2 margin-top Konflikte mit seinem Abschnitt Tag

Question

Fiddle

Ich habe einen Abschnitt Tag bekommt einen h2-Tag mit einigen oberen Rand enthält. Ich kann nicht verstehen, warum das margin, das auf das h2-Tag angewendet wurde, nicht verwendet wird, um es von dem section-Tag, das es enthält, zu entfernen, sondern das section weg von dem body-Tag zu verschieben.

Answer 1

Dies geschieht aus folgendem Grund:

https://www.w3.org/TR/CSS22/box.html#collapsing-margins

Die Eltern nimmt den Rand des ersten Kindes.

Ändern des h2-Tags zur Anzeige: Inline-Block ändert das Verhalten zu dem, was Sie wollen.

Answer 2

Eine Möglichkeit, das Problem zu lösen, wenn Sie ein Leerzeichen um Ihre h2 haben wollen, ist dies:

h2 { 
    margin-top:0px; 
    padding-top:10px; --> whatever you want but in padding 
} 

In CSS gibt es einen Zusammenbruch Marge. Dies bedeutet, dass die angrenzenden Ränder von zwei oder mehr Kästchen (die Geschwister sein können oder auch nicht sein können) sich zu einem einzigen Rand kombinieren lassen. Also in Ihrer ursprünglichen Geige wird es der Rand von body Tag