Hey Guys,

In my attempt to fully understand css something has always thrown me off. Why is it that the vertical margins of any <p>, <h1> etc element don't expand the <div> unless it has a border?

For example:
<div style="background-color:blue; margin:0px; border:1px solid black">
<div style="background-color:red; margin: 0px; ">
<h1 style="margin:50px;">Here we go</h1>
</div>
</div>

In this example the h1 margin won't push the "red" <div> up or down by 50px. Instead it will push the "blue" <div> surrounding it, up by 50px because it has the border. What is the reasoning behind this? And is there a way to make it so the "red" <div> would expand up and down without putting a border on it?

Thanks

Can you give a screenshot of what you mean? I'm not sure what you are saying.

You need to read up on the CSS Box Model:
http://www.w3.org/TR/REC-CSS2/box.html

Then read up on inline vs. block level elements
http://www.autisticcuckoo.net/archiv...ck-vs-inline-1

@LadynRed:
Thanks. I'll see if I can find the answer in those resources.

@bluemage
Here's 2 different screen shots with the corresponding code. Notice which div the border is located on.

Example 1:
<div style="background-color:blue; margin:0px; border:1px solid black">
<div style="background-color:red; margin: 0px; ">
<h1 style="margin:50px;">Here we go</h1>
</div>
</div>

Screenshot 1:
http://www.fuse11.com/examples/marginborder/screen1.jpg


Example 2:
<div style="background-color:blue; margin:0px; ">
<div style="background-color:red; margin: 0px; border:1px solid black">
<h1 style="margin:50px;">Here we go</h1>
</div>
</div>
Screenshot 2:
http://www.fuse11.com/examples/marginborder/screen2.jpg

I'd say the main reason is also the margin: 0px in the red style, you are giving no margin,although I'm not sure why it takes away the margin...when you move the border and stuff.