Корректировка крайнего края div внутри контейнера div подталкивает как внутренний div, так и контейнер div вниз от тела

Я чувствую, что это должно быть проблемой, когда я делаю что-то глупое, но я не могу понять. Здесь показана демонстрационная страница, показывающая мою проблему. Источник страницы:

<html>
<head>
    <title>demo</title>
    <style type='text/css'>
        body{
            margin: 0px;
            padding: 0px;
        }
        #container{
            height: 100%;
            background-color: black;
        }
        #logo{
            margin: 25px auto auto auto;
            width: 360px;
            height: 45px;
            background-color: goldenrod;
        }
    </style>
</head>
<body>
    <div id='container'>
        <div id='logo'>
            <p>logotext.</p>
        </div>
    </div>
</body>
</html>

Таким образом, чем больше вы настраиваете верхнее значение поля, тем дальше вниз страница #logo и #container перетаскиваются. #container должен оставаться на месте, а #logo должен перемещаться по странице.

Ответы

Ответ 1

Это вызвано сбрасыванием полей. Если два элемента касаются полей, то поля сливаются. Существует большое объяснение этого здесь. Перейдите в раздел Collapsing Margins Between Parent and Child Elements.

Вот три разных решения.

Один из них - добавить overflow: auto в контейнер. Это изменяет BCF (контекст форматирования блоков). Этот метод описан более подробно здесь.

#container {
    height: 100%;
    background-color: black;
    /* Add oveflow auto to container */
    overflow: auto;
}

http://jsfiddle.net/bzVgV/20/

Вторым является использование отступов на контейнере вместо поля на логотипе. Это берет поля из уравнения.

#container {
    height: 100%;
    background-color: black;
    /* Use padding on container instead of margin on logo */
    padding-top: 30px;
}

http://jsfiddle.net/bzVgV/18/

Окончательное решение состоит в том, чтобы маржи больше не касались. Вы можете сделать это, добавив отладку 1px к родительскому.

#container {
    height: 100%;
    background-color: black;
    /* Now margins of container and logo won't touch */
    padding-top: 1px;
}

http://jsfiddle.net/bzVgV/21/