InQusitive InQusitive - 5 months ago 9
CSS Question

Why do static elements move?

If static positioned elements are not affected by the top, bottom, left, and right properties, why does the box move along with the container when I change the margin-top value of the box element?

I have kept my code at: https://jsfiddle.net/b9rtwkq7/5/

HTML:

<div class="container">
<div class="box">
</div>
</div>


CSS:

.container
{
width:500px;
height: 500px;
background-color: grey;
margin-top: 00px;
}

.box
{
width:100px;
height: 100px;
background-color: orange;
margin-top: 100px;

}

Answer

The margins are collapsed in the jsfiddle you posted: https://www.w3.org/TR/CSS2/box.html#collapsing-margins

Add overflow: auto/hidden to .container or use the following css which I've added in a class called .no-collapse myself:

padding-top: 0.01px;
margin-top: -0.01px;
Comments