Margin does not press another margin

Question

I have a number of elements like this:

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

I have a top margin of 5px on h1and a bottom margin of 10px on p. But the resulting margin is only 10 pixels. And if I increase the lower limit to 50 pixels and the upper margin to 40 pixels, the total margin is only 50 pixels.

Total margin always has the largest margin. What for? And how can I fix this?

Answer 1

The behavior you see is known as margin collapse, and this is the expected behavior. Basically, when the edges of two elements of a block level touch, they collapse, and only the largest appears.

. , , .

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

- padding , .