Внутренняя разделительная маржа, влияющая на слагаемое div margin

У меня есть внутренний div внутри содержащего div.

HTML

<div id="container">
  <div id="inner"></div>
</div>

CSS

#container {
    width: 100px;
    height: 100px;
    background-color: red;
}
#inner {
    margin: 30px;
    width: 40px;
    height: 40px;
    background-color: black;
}

Fiddle

http://jsfiddle.net/8xUTJ/4/

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

Может кто-нибудь объяснить, что CSS думает, что он здесь делает?

Ответы

Ответ 1

Добавьте overflow:auto в div #container.

Пример jsFiddle

или

добавьте границу в div #container.

Подробнее об этом сворачивающемся поведении маржи можно прочитать в W3C.

Ответ 2

Хотя предлагаемые решения жизнеспособны, никто не объясняет проблему. Он назывался крах, который происходит в нескольких сценариях.

Сценарий 1 - эти позиции будут только на 30 пикселей друг от друга, потому что поля рушится вместе, и преобладает больше.

<div style="margin-bottom: 20px"></div>
<div style="margin-top: 30px"></div>

Сценарий 2 - (ваш сценарий) поле внутренней коробки разливается за пределами внешнего блока.

<div class="outer">
    <div style="margin-top: 20px"></div>
</div>

Решение состоит в том, чтобы придать внешнему блоку некоторую прокладку или границу (как это было предложено другими). Часто я использую следующий CSS на внешнем поле, чтобы смягчить такие ситуации:

.outer {
    margin-top: -1px;
    border-top: 1px solid transparent;
}

Ответ 3

метод 1

position:absolute для внутреннего div, поэтому он знает , что для 30px margin из

http://jsfiddle.net/8xUTJ/5/

метод 2

display:inline-block для внутреннего div

http://jsfiddle.net/8xUTJ/7/

метод 3

border:solid 0 transparent для внешнего div

http://jsfiddle.net/8xUTJ/8/

Сделайте выбор:)

Ответ 4

Во-первых, #container имеет margin-top:0 и #inner имеет margin-top:30px. Отношения этих элементов связаны с родительским и первым дочерним элементом.

Если нет границ, отступов, встроенного содержимого или разрешения на разделить край верхнего края блока с краем-вершиной его первого дочерний блок или отсутствие границы, заполнение, встроенный контент, высота, min-height или max-height, чтобы отделить нижний край блока с краем нижней части его последнего ребенка, тогда эти поля рушится. Свернутый край заканчивается вне родителя.

Коллапс маржи означает, что эти поля объединены в один запас, размер которого является самым большим из полей, объединенных в него

Эти правила применяются даже к полям, которые равны нулю, поэтому поле первый/последний ребенок заканчивается вне своего родителя (согласно правилам выше) независимо от того, является ли родительское поле равным нулю

Вот почему вы получаете верхний край 30px, применяемый вне элемента #container, из вашей скрипки:

Ответ 5

проверьте скрипт

Вам нужно float внутренний div, чтобы он работал

#inner {    
    margin:30px;
    float:left;   /* give float */
    width: 40px;
    height: 40px;
    background-color: black;
 }

Или укажите свойство overflow:auto в div#container.

проверьте скрипт