Question

I have following code

<h1>Test</h1>
<p>Another test</p>
h1
{
border:2px solid red;
margin-bottom:30px;
}
p
{
border:2px solid red;
margin-top:20px;
}

Live fiddle here http://tinkerbin.com/dnhA713P

I want to have 50px space between h1 and p but its not getting the 50px space.

Answer 1

It’s called collapsed margins. Here’s a good article for mortals:

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

And here’s the specs for the rest of you:

http://www.w3.org/TR/CSS2/box.html#collapsing-margins

In simple terms, this definition indicates that when the vertical margins of two elements are touching, 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.