All geek questions in one place

Why does the position of a div depend on the extreme of its child?

Here is my markup

CSS

body{
    background-color:#353535;    
}
#parent{
    background-color:#eee;
}
#child{
    background-color:#1b1b1b;
    margin:60px auto 10px;
    width:100px;
}

HTML

<div id="parent">
    <div id="child">child</div>
</div>

Result: http://jsfiddle.net/W74TZ/

+3
source share
2 answers

Rules for collapsing fields . If margin-top reaches the top <body>without any conflicts (for example, padding-top: 1px on #parent), the parent will "inherit" this.

You can avoid this by installing instead padding-top:60pxon #parent.

+6
source

This is part of the CSS specification. You can read more about this by breaking up margins on Google, for example. http://www.howtocreate.co.uk/tutorials/css/margincollapsing

+4

Source: https://habr.com/ru/post/1781306/

More articles:


All Articles