Margin not adding on elements?

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.

Answer 2

If you use something like Chrome developer tools you can right mouse button on an element and get a visual of the box model for your elements. See these screenshots for reference. I think the answer will become clear once you see the visuals. The problem is collapsed margins.