3

I've 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

Dancer
  • 17,035
  • 38
  • 129
  • 206
  • Done a little fiddle, gap is 15px http://jsfiddle.net/RBR79/ – Curtis Sep 15 '11 at 15:12
  • There could be any number of things causing this – the positioning, floating, the browser, the container block... Post relevant CSS and HTML please. **edit** @thirtydot: D'oh, forgot margins collapse vertically. http://www.richinstyle.com/guides/box2.html#margin – stslavik Sep 15 '11 at 15:13
  • 1
    @stslavik: It's collapsing margins. – thirtydot Sep 15 '11 at 15:14

4 Answers4

5

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.

Community
  • 1
  • 1
zzzzBov
  • 174,988
  • 54
  • 320
  • 367
0

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>
TOPKAT
  • 6,667
  • 2
  • 44
  • 72
0

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

v42
  • 1,415
  • 14
  • 23
-1

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

Hanny
  • 2,078
  • 6
  • 24
  • 52
  • 1
    Padding and margins are completely different things, you should not use one instead of the other. – Jose Faeti Sep 15 '11 at 15:11
  • Padding should only affect a containing div. It's the space between the inside edge of the container, and the outside edge of the content. – stslavik Sep 15 '11 at 15:12
  • I was under the impression he wanted 30px of space. Padding would have done that. Thanks for the heads up gang. – Hanny Sep 15 '11 at 15:23
  • 1
    I gave the -1 not because you recommended using padding, but because you said that Paul's assumption was "correct" which it most certainly wasn't. – zzzzBov Sep 15 '11 at 15:42
  • yep, you're right zzzzBov. I'm running a bit behind today apparently - need more java. – Hanny Sep 15 '11 at 16:13