H2 margin-top conflicts with its Section tag

Question

I've got a section tag containing an h2 tag with some top margin. I cannot understand why the margin applied to the h2 tag is not used to distance it from the section tag that contains it, but instead to move the section away from the body tag.

It's called margin collapse. And there are lots of duplicate questions. — Oriol, Jul 01 '16 at 13:45

score 0 · Accepted Answer · answered Jul 01 '16 at 13:20

0

This happens because of the following:

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

The parent takes the margin of the first child.

Changing the h2 tag to display:inline-block will change the behaviour to what you want.

answered Jul 01 '16 at 13:20

Paul Connolly

359
2
8

score 0 · Answer 2 · answered Jul 01 '16 at 13:42

One way to solve the issue if you want to have a whitespace around your h2 is this:

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

In CSS there is a collapse margin. This means that the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Hence in your original fiddle it becomes the margin from the bodytag

H2 margin-top conflicts with its Section tag

2 Answers2