Why do static elements move?

Question

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;

}

Check this: http://stackoverflow.com/questions/1762539/margin-on-child-element-moves-parent-element — Akhilesh B Chandran, Jun 05 '16 at 09:11
@InQusitive, no position static makes an element only ignore top, bottom, left and right not margins. Besides that it also prevents absolute child elements to be positioned relative to it's position. — seahorsepip, Jun 05 '16 at 09:25
Changed my answer to better code that does not affect the .container or .box in any way. — seahorsepip, Jun 05 '16 at 09:31

seahorsepip · Accepted Answer · 2016-06-05T09:38:50.900

0

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:

.no-collapse:before {
    content: "";
    display: table;
}

edited Jun 05 '16 at 09:38

answered Jun 05 '16 at 09:18

seahorsepip

4,519
1
19
30

I need to learn what is a collpased margin. I am a beginner in css. – Sreeraj Chundayil Jun 05 '16 at 09:25
It's something I even have issues with every now and then >.>, Just updated my answer above to code I just found out after testing in jsfiddle thay does not require any changes to .container or .box – seahorsepip Jun 05 '16 at 09:33
Edit: seems using before still moves .container – seahorsepip Jun 05 '16 at 09:39
Edit: updated code – seahorsepip Jun 05 '16 at 09:43
Some links to master css? – Sreeraj Chundayil Jun 05 '16 at 09:47
@InQusitive didn't really have a master css with snippets like this, I just started to make one(less css): https://jsfiddle.net/seahorsepip/7kucaqkh/ – seahorsepip Jun 05 '16 at 11:25
sorry, master as verb. – Sreeraj Chundayil Jun 05 '16 at 14:43
@InQusitive, check css-tricks and codrops. – seahorsepip Jun 05 '16 at 16:57

Why do static elements move?

1 Answers1