28

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/

ComFreek
  • 29,044
  • 18
  • 104
  • 156
user2738640
  • 1,207
  • 8
  • 23
  • 34

5 Answers5

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!

Tim Seguine
  • 2,887
  • 25
  • 38
CRABOLO
  • 8,605
  • 39
  • 41
  • 68
  • 10
    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. – BoltClock Nov 27 '13 at 10:40
  • 1
    Love the examples, great way to explain this. – Jonathan Nov 27 '13 at 10:40
  • 4
    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. – BoltClock Nov 27 '13 at 10:55
  • "I'll have what she's having!" ... In that they share the same margin. – TheTurkey Nov 27 '13 at 15:13
  • Nice analogy there, +1 – Amal Murali Feb 02 '14 at 18:02
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.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
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

Bhojendra Rauniyar
  • 83,432
  • 35
  • 168
  • 231
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.

MikaldL
  • 159
  • 1
  • 2
  • 15
  • 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) – meriton Dec 01 '13 at 14:40
0

Read about margin collapsing

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

Boris Kirov
  • 746
  • 7
  • 16