Question regarding DIVs and margin

Hi

Here's a simple example of html & css code:

<div id="box1">
<div id="box2">
text
</div>
</div>

#box1 { height: 500px; background: red; }
#box2 { margin-top: 50px; }

First of all, this is not a request for workarounds or other ways of coding (padding, position, margin on different elements and other things will do the trick).

My question is... why does the box2 margin pushes down the box1 div creating a white 50px background instead of leaving it red? Isn't that margin suppose to expand inside the box1 div, acting just like a padding for box1 div?

 

This is related to "collapsing margins" which are put in place in order to give proper spacing between elements as you view them down the page. 'box1's margins are collapsed but this doesn't affect box2. To see what I mean, put 'outline: 1px solid' for box1 and see what happens. (I'm typing this too fast cause I'm leaving. HOpe it makes sense.)

 

If you wanted to resolve this issue, you need to clear the inner div. Try this CSS:

#box1 { height: 500px; background: red; overflow: hidden }
#box2 { margin-top: 50px; float: left }

 

Clearing is for floated elements. He's not floating anything so your solution makes no sense. It's not the issue anyway.

 

Actually, my solution makes perfect sense. You'll notice in the CSS I offered I floated the div...

 

You are stating that the solution to the problem is to clear the div but the problem occurs without a float so introducing a float then saying clearing the float is the solution doesn't make sense. Besides a collapsing margin is the issue, not floats.

 

I realise that. However, my solution will solve his problem.

 

Thank you for your replies.
As I said in my first post, I don't want solutions for that "problem". I just want to understand why that margin affects div1.
I read more about collapsing margin and it makes (some) sense.

 

i think if you could just use float to ur code it would work out fine. Just try it out.

Thanks

 

margin is the external invisible boundary while padding is internal boundary.

Take an example of your body.

The clothe you are wearing is your margin.
And the negligible gap that you have between your skin and cloth is the padding.

 

Good explanation

 

He did not ask for solutions @pmek

He wants to understand the whole thing. You did not provide any explanation, just a solution to a problem that was no problem.
Adding a float/clear to his code was not the question.

drhowarddrfine is correct about collapsing margin.