Margin not adding items?

Question

I have the 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 scene here http://tinkerbin.com/dnhA713P

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

Answer 1

He called the curtailed fields. Here is a good article for mortals:

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

And here are the specifications for all of you:

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

Simply put, this definition indicates that when the vertical fields of two elements touch, only the margin of the element with the highest margin value will be respected, while the margin of the element with the lower marker value will be collapsed to zero.

Answer 2

If you use something like the Chrome developer tools, you can right-click on an element and get a visual box model for your elements. See these screenshots for reference. I think the answer will become clear as soon as you see the visual effects. The problem is the folded boundaries.

Answer 3

I do not see how this does not work ... but you will get only 30px margin. A larger margin takes precedence. You can also try wrapping them in <div> elements and assigning a 50px field to one of 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; } 

Answer 4

I believe the reason you are not getting the expected results is because, since you already gave the h1 element a lower border of 30px, the p element already has a margin above it of 30px, so the message should have a margin-top of 20px doing nothing. Try giving the p margin-top of 40px element and see that the difference between them increases by 10 pixels.

Answer 5

My suggestion is that you cannot add fields to the h1 or p tags because they are called inline Elements and their default value for the css display property is inline . So you should change this to display:block; then you should be able to add margins and paddings.