Регулировка отступа поля div внутри контейнера div толкает внутренний div и контейнер div вниз от тела - PullRequest
Новая
       4

Регулировка отступа поля div внутри контейнера div толкает внутренний div и контейнер div вниз от тела

14 голосов
/ 16 декабря 2011

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

<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 должен оставаться на месте, а #logo должен сдвигаться вниз по странице.

1 Ответ

32 голосов
/ 16 декабря 2011

Это вызвано сокращением полей.Если два элемента имеют соприкасающиеся поля, то поля сливаются.Это прекрасное объяснение здесь .Перейдите в раздел под названием 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/

...