See what a simple code

.wrap { max-width: 1885px; width: 100%; margin: 0 auto; padding: 0px; } .slider { background-image: url("../img/slide1.png"); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position: relative; } .logo { background-image: url("../img/logo.png"); background-repeat: no-repeat; width: 414px; height: 81px; margin: 20px 0 0 0; position: relative; } 
 <header> <div class="slider"> <div class="wrap"> <div class="logo"></div> <nav> <ul class="mainNav"> <li>О нас</li> <li>Юридическим лицам</li> <li>Физическим лицам</li> <li>Карта сайта</li> <li>Интернет</li> </ul> </nav> </div> </div> </header>

And here's the actual question, why when I set the .logo margin: 20px 0 0 0; for the logo and .slider goes .slider , and does not remain pressed to the screen?

PS - and if in .logo replacing the margin with padding then the indentation disappears completely, why?

    1 answer 1

    If the parent e-ta has no limiting factors, then the margin goes from the inner element to the outer one. Then the margin is chosen according to the scheme: if they are of the same name, then a larger one is chosen, if unlike, then addition occurs.

    You can undo this action in relation to the parent, there are several ways:

    1. set padding parent unit;
    2. set the border parent block;
    3. set overflow parent block, any value except visible (works everywhere except old IE);

    Accordingly, you can solve it like this:

     <html> <head> </head> <body> <header> <div class="slider"> <div class="wrap"> <div class="logo">1</div> <nav> <ul class="mainNav"> <li>О нас</li> <li>Юридическим лицам</li> <li>Физическим лицам</li> <li>Карта сайта</li> <li>Интернет</li> </ul> </nav> </div> </div> </header> </body> </html> body { margin: 0; } .wrap{ max-width: 1885px; width: 960px; margin: 0px auto; padding: 0px; } .slider{ background-image: url("../img/slide1.png"); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; padding-top:20px; background-color:#ccc; } .logo{ background-image: url("../img/logo.png"); background-repeat: no-repeat; width: 414px; height: 81px; margin: 0px; position: relative; background-color:#000; }

    Ps. margin is external indent, padding - internal.