Margin does not push down another margin

Question

I have a series of elements like this:

<h1>...</h1>
<p>.......</p>
<h1>...</h1>
<p>.......</p>
<!-- etc. -->

I have a 5px top margin on h1, and a 10px bottom margin on p. But the resulting margin is only 10px. And if I increase the bottom margin to 50px and the top margin to 40px, the total margin is only 50px.

The total margin is always whatever the biggest margin is. Why? And how can I fix it?

Answer 1

The behavior you're seeing is known as margin collapse, and it is an expected behavior. Basically, when the margins of two block level elements touch, they collapse, and only the largest one will appear.

Margins collapse between adjacent elements. In simple terms, this means that for adjacent vertical block-level elements in the normal document flow, only the margin of the element with the largest margin value will be honored, while the margin of the element with the smaller margin value will be collapsed to zero.

http://reference.sitepoint.com/css/collapsingmargins

There is no one fix for this - you can try using padding instead, or simply increase the margins by taking this into account.