CSS: Margin-top when parent's got no border
CssBorderMarginCollapseCss Problem Overview
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>
Thanks
Css Solutions
Solution 1 - Css
You could add overflow:auto
to .body
to prevent margin-collapsing. See http://www.w3.org/TR/CSS2/box.html#collapsing-margins
Solution 2 - Css
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.
Solution 3 - Css
Use padding
instead of margin
:
.body .container {
...
padding-top: 30px;
}
Solution 4 - Css
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.
Solution 5 - Css
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
.
Solution 6 - Css
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%;
}
Solution 7 - Css
Not sure how hackish this sounds, but how about adding a transparent border?