div margin margin margin parent div

Question

У меня есть небольшая проблема, о которой я не знаю, почему это происходит. У меня есть 2 div Wrappers, так называемый «mainWrapper», который имеет фоновое изображение и дочерний элемент этого div, называемый «loginWrapper». Я хочу, чтобы ловушка для входа была размещена на 15% сверху, но если я просто добавлю маржу, она также изменит поле родительского div (mainWrapper).

Может кто-нибудь объяснить мне, почему это происходит, и как я могу это исправить?

Код:

HTML:

<div id="mainWrapper"> 
    <div id="loginWrapper"> 
     <h:graphicImage id="logo" alt="spotted deluxe" url="resources/images/logo.png" /> 
    </div> 
</div> 

CSS:

body,html{ 
    height:100%; 
} 

body { 
    margin:0; 
    background-color: green; 
    background: url(../images/backround_red.png) no-repeat center center fixed; 
    background-size: cover; 
} 

div#mainWrapper { 
    text-align: center; 
    margin: auto; 
    width:70em; 
    height:100%; 
    background: url(../images/header.jpg) no-repeat center center fixed; 
    background-size: cover; 
    padding-left:4em; 
} 

div#loginWrapper { 
    /*margin-top: 15%;*/ 
} 

img#logo { 
    display: inline; 
} 

Answer 1

да, это добавит запас для родителей. Попробуйте позицию вместо этого. \

div#mainWrapper { 
    position: relative; 
} 

div#loginWrapper { 
    position: relative; 
    top: 15%; 
} 

Answer 2

Это особый случай margin collapsing. Некоторые опции, чтобы предотвратить его являются:

1. Добавить 1px обивка-топ или границы сверху родительского DIV
2. сделать родительский DIV установить новый block formatting context (например, путем добавления к нему переполнения: скрытый или изменить его дисплей для отображения: table)
3. Добавление в родительский div: перед псевдоэлементом с отображением: таблица, как в популярном Micro Clearfix hack.