29

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/

Improve this question
3

5 Answers 5

Reset to default
26

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!

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

This example falls flat when you try to line the two boxes up horizontally and say "there must be a margin of 10px to the right of box1" and "there must be a margin of 10px to the left of box2". You could say that Harry is standing 10 feet above Sally... but then that just sounds like a primary school math problem.
Love the examples, great way to explain this.
That said, the idea of collapsing margins is based mostly on what you've just explained, except it's based on leading between paragraphs, which is why it only works for vertical margins and not horizontal ones.
"I'll have what she's having!" ... In that they share the same margin.
Nice analogy there, +1
16

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.

Improve this answer

Comments

5

You need to know about margin-collapsing. The following picture describes itself about the margin collapsing.

enter image description here

enter image description here

Improve this answer

2 Comments

@meriton imagine <div class="parent"><div class="child"></div></div> then parent margin 30px and child margin 20px then it collapses and have 30px only.
@meriton And ofcourse the content area should be moved to up but it's my mistake when presenting picture. Thanks. Edited.
0

Margins are outside of your DOM Element and are for other Margins like transparent so they will overlap eachother.

If you do it with padding it'll work good because padding is inside the div.

Here a fairly easy explanation of how Margins and Paddings work.

Improve this answer

1 Comment

No, margins don't always collapse. And the link you posted doesn't say anything about when they do (or even that they do - simply because margins are transparent doesn't mean they overlap)
0

Read about margin collapsing

This must help you https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.