CSS - Margin against Margin

I'v开发者_如何学Ce got an aissue with 2 divs - both rendered as blocks both have margins of 15px (top div has bottom margin, bottom has top), therefore I expect the gap between to be 30px rather than 15px, is this a correct assumption or am I going mad!?

Cheers Paul

The CSS box model defines the behavior for collapsing margins, and it is expected behavior among all browsers.

You might also find my answer to this related question to be of use.

Both margins will have 15px, and not sum them. If you want to add them use padding instead.

have had the same issue and couldn't use padding as a fix. I have managed to fix this with this little hack:

.btn {
    /* hack for a 2px margin */
    border-top: 2px #fff solid !important;
    /* this is important if you have a background-color
    and don't want to see it underneath the transparent border*/
    background-clip: padding-box;
}

Please launch this snippet for demo:

div {
  margin: 10px;
  background: rgb(48, 158, 140);
  padding: 5px 15px;
  font-weight: bold;
  color: #fff;
}

.fake-margin {
  border-top: 10px solid transparent;
  background-clip: padding-box;
}

<div>Margin applied is 10px on each sides</div>
<div>the first two have only 10px between them</div>
<div class="fake-margin">the last two have 10 + 10px</div>
<div class="fake-margin">= 20 px</div>

Correct - but if it's not working out you could try 'padding' instead of 'margin' - that will probably have the desired effect.