Reputation: 2692
I am facing very simple problem with margin-top
and its freaking me out. I have simplified my document to make it readable.
Here is my structure of html document
<body>
<section>
</section>
<section>
<div></div>
</section>
</body>
Here is my CSS
section{
width: 100%;
height:768px;
background-color: red;
border-bottom: 1px solid yellow;
position: relative;
}
div{
background-color:green;
height:50px;
width:50px;
margin-top:0px;
}
When div
's margin-top
is 0, it looks like this:
But when I change it to margin-top
to 10px
, it looks like this:
I could not point out how that white space is added. Inspection shows that it is the part of body. Section is actually pushed down. I was expecting that small div to be pushed down relative to section. Can anyone explain this weired behavior?
Upvotes: 1
Views: 134
Reputation: 1607
here the fiddle http://jsfiddle.net/suriyag/UhqX9/1/ that has solution for your requirements
section{
position:relative;
width: 100%;
height:768px;
background-color: red;
border-bottom: 1px solid yellow;
position: relative;
}
div{
position:absolute;
top:10px;
background-color:green;
height:50px;
width:50px;
}
did some little changes in your code
Upvotes: 1
Reputation: 9969
w3.org
:In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.
Now to prevent collapsed margin, you should add overflow:auto
to the parent element.
Upvotes: 0