How does CSS margin work?

Question

In the following code, shouldn't the margin between .box1 and .box2 be 20px as the .box1 has 10px bottom margin and .box2 has 10px top margin.

<div class="box">     <div class="box1"></div>     <div class="box2"></div> </div> 

CSS:

.box1{     margin-bottom: 10px; }  .box2{     margin-top: 10px; } 

http://jsfiddle.net/3C7bW/

Answer 1

No, the margin will only be 10px between the 2 boxes.

You are saying the same thing twice , "that there must be a margin of 10px below box 1" and "that there must be a margin of 10px above box2"

Think of it like this :

There are 2 people, Harry and Sally. Harry is standing 10 feet from Sally. How far is Sally away from Harry? Yep, you got it, 10 feet!

Answer 2

The bottom margin of the first box and the top margin of the second box are considered to be adjoining; therefore, they collapse into one.

Note that this only applies to vertical margins; horizontal margins never collapse no matter the circumstance. If you made the two boxes float such that they line up horizontally, and gave .box1 a right margin and .box2 a left margin, the total space between them would indeed be 20px.

In fact, even if you didn't line them up horizontally, but floated them and gave them clearance so that .box2 clears .box1, the bottom and top margins would no longer collapse. Both of these cases are mentioned in the spec as well.