CSS: Margin-top when parent's got no border

Question

Hi,

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?

html:

<div class="header">Top</div>
<div class="body">
    <div class="container">Box</div>
</div>
<div class="foot">Bottom</div>

css:

.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;
}

Thanks

Answer 1

Use padding instead of margin:

.body .container {
    ...
    padding-top: 30px;
}

Answer 2

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.

Answer 3

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%;
}

Answer 4

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.

Answer 5

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

Answer 6

Thanks for your answers!

I've seen that using padding-top solves this problem when a single box is inside the div. Another case is when I have multiple orange rectangles (example) and I want them to have 10px margin (both top and bottom). Then, I think the only solution here is to use "overflow: auto".

Answer 7

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

Answer 8

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.

Answer 9

i was just having the same problem and overflow:auto works brilliantly. Thank you

Answer 10

I was also facing this problem and overflow:auto works with the main div. Thanks :)