CODEWITHSUNDEEP
css
Ali Nouman
Ali Nouman

Reputation: 3414

Margin not adding on elements?

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.

Upvotes: 5

Views: 2224

Answers (4)

Hristo
Hristo

Reputation: 46477

I don't see how that doesn't work... but you'd only get a 30px margin. The bigger margin takes precedence. You can also try wrapping them in <div> elements and assigning a 50px margin to one of the two.

http://jsfiddle.net/LuDvL/

<div id="header">
    <h1>Test</h1>
</div>

<div id="content">
    <p>Another test</p>
</div>

/* either one of these should work */
#header { margin-bottom: 50px; }
#content { margin-top: 50px; }

Upvotes: 1

Filip
Filip

Reputation: 2522

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.

Upvotes: 8

Nick Rolando
Nick Rolando

Reputation: 26167

I believe the reason you aren't getting your expected results is because since you already gave the h1 element a margin-bottom of 30px, the p element already has a margin above it equal to 30px, so telling it to have a margin-top of 20px does nothing. Try giving the p element a margin-top of 40px and watch the margin between them increase by 10px.

Upvotes: 1

mrtsherman
mrtsherman

Reputation: 39872

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.

enter image description here

enter image description here

enter image description here

Upvotes: 3

Related Questions