55

As you can see in this picture, I've got an orange div inside a green div with no top border. The orange div has a 30px top margin, but it's also pushing the green div down. Of course, adding a top border will fix the issue, but I need the green div to be top borderless. What could I do?

.body {
    border: 1px solid black;
    border-top: none;
    border-bottom: none;
    width: 120px;
    height: 112px;
    background-color: lightgreen;
}

.body .container {
    background-color: orange;
    height: 50px;
    width: 50%;
    margin-top: 30px;
}
<div class="header">Top</div>
<div class="body">
    <div class="container">Box</div>
</div>
<div class="foot">Bottom</div>
Daniel Widdis
  • 8,424
  • 13
  • 41
  • 63
Manny
  • 553
  • 1
  • 4
  • 4
  • Can you elaborate on the desired effect? Do you want text within the orange container to appear 30 pixels from the top or do you want the top of the orange container to appear 30 pixels below the top of the green container? – Mayo Sep 08 '09 at 15:45
  • Related question: http://stackoverflow.com/questions/315738/unexpected-margin-with-very-simple-html – mercator Sep 08 '09 at 15:59
  • Might be more appropriate for http://doctype.com/ – Nobody Aug 03 '10 at 10:40
  • Related: [clear and collapse fix](http://stackoverflow.com/questions/15007322/clear-fix-and-uncollapse-margins-with-css-without-side-effects). – Qtax Feb 21 '13 at 16:36

7 Answers7

92

You could add overflow:auto to .body to prevent margin-collapsing. See http://www.w3.org/TR/CSS2/box.html#collapsing-margins

Fabian
  • 1,862
  • 13
  • 17
  • 3
    woot, just saved me from going mad with my disappearing margin! – Andrew Bullock Oct 27 '09 at 17:43
  • 3
    I had the same problem, was driving me insane as I do not wish to have a border, this fixed my issue, thanks for the info, and the link helps explains why this happens. – jimplode Oct 28 '11 at 14:45
  • 2
    Margin collapsing seems a strange thing to have as a default, anyone got a good example of when you would want to use it? – opsb Jan 25 '13 at 17:53
  • 1
    Good doc on margin collapsing: https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing – stevenw00 Jul 07 '15 at 08:53
9

What you experience is margin collapsing. The margin doesn't specify an area around an element, but rather the minimum distance between elements.

As the green container doesn't have any border or padding, there is nothing to contain the margin of the orange element. The margin is used between the top element and the orange element just as if the green container would have the margin.

Use a padding in the green container instead of a margin on the orange element.

alex
  • 479,566
  • 201
  • 878
  • 984
Guffa
  • 687,336
  • 108
  • 737
  • 1,005
1

Use padding instead of margin:

.body .container {
    ...
    padding-top: 30px;
}
Tomas Aschan
  • 58,548
  • 56
  • 243
  • 402
1

Not sure if this will work in your case, but I just solved this with the following CSS properties

#element {
    padding-top: 1px;
    margin-top: -1px;
}

#element was being pushed down because it's first child element had a margin-top: 30px. With this CSS, it now works as expected :) Not sure if it'll work for every case, YMMV.

alex
  • 479,566
  • 201
  • 878
  • 984
0

You can either add padding-top: 30 on the green box, use relative positioning on the orange box with top: 30px, or float the orange box and use the same margin-top: 30px.

Jonathan Patt
  • 1,572
  • 14
  • 13
0

You read this document: Box model - Margin collapsing

CSS

.body {
    border: 1px solid black;
    border-bottom: none;
    border-top: none;
    width: 120px;
    height: 112px;
    background-color: lightgreen;
    padding-top: 30px;
}

.body .container {
    background-color: orange;
    height: 50px;
    width: 50%;
}
ranonE
  • 497
  • 2
  • 6
0

Not sure how hackish this sounds, but how about adding a transparent border?

finferflu
  • 1,368
  • 2
  • 11
  • 28