Ниже приведен фрагмент (демонстрация на JSFiddle).

#inner {
    background-color: yellow;    
    margin-left: 50px;
    margin-bottom: 50px;
}
#outer {
    background-color: red;
}
<div id="outer">
    <div id="inner">
        test
    </div>
</div>

Как видно из демонстрации, элемент #inner имеет margin-bottom.

Я ожидал, что высота #outer будет достаточно большой, чтобы включить контур поля #inner. На выходе будет красная полоса под желтой полосой .

Однако я обнаружил, что высота #outer не изменилась вообще, хотя я добавил правило margin-bottom: 50px для #inner.

Есть у кого-нибудь идеи по этому поводу? И есть ли способ обеспечить, чтобы область содержимого родительского элемента была достаточно большой, чтобы удерживать контур дочернего поля?

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

Благодарность!

4
Hanfei Sun 27 Окт 2015 в 10:58

6 ответов

Лучший ответ

Вы видите сворачивающиеся поля проблема.

Верхнее и нижнее поля блоков иногда объединяются (сворачиваются) в одно поле, размер которого является наибольшим из объединенных в него полей, что называется схлопыванием полей.

Из трех случаев ваш - это случай схлопывания полей между родительскими и дочерними элементами.

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

Если вы добавите еще один элемент сразу после родительского div, вы увидите, что поле выходит за его пределы. Во фрагменте ниже показано свернутое поле:

#inner { background-color: yellow; margin-left: 50px; margin-bottom: 50px; }
#outer { background-color: red; }
<div id="outer">
    <div id="inner">
        test
    </div>
</div>
<p>You can see the collapsed margin above this text outside of the parent div.</p>

Вот ссылка из спецификации: http://www.w3.org /TR/CSS21/box.html#collapsing-margins


Как это исправить?

Решение дано в самом цитируемом тексте ссылки выше. Просто примените любой из них к своему родительскому div - border, padding, height, min-height или max-height.

Самый простой способ исправить это - добавить границу к внешнему div:

#outer { background-color: red; border: 1px solid gray; }

Еще лучше, примените отступы к родительскому div вместо поля внутреннего.

#outer { background-color: red; padding-bottom: 50px; }

Примеры:

Fiddle (с рамкой): http://jsfiddle.net/abhitalks/rrtfhyky/1/ < / a>

Fiddle (с заполнением): http://jsfiddle.net/abhitalks/rrtfhyky/2/ < / a>

Фрагмент (с заполнением):

#inner { background-color: yellow; margin-left: 50px; }
#outer { background-color: red; padding-bottom: 50px; }
<div id="outer">
    <div id="inner">
        test
    </div>
</div>
<p>Some text that follows.</p>
5
Abhitalks 27 Окт 2015 в 08:36

Я знаю эту распространенную "ошибку", что бы я сделал, если бы вы меняли поле на отступ и помещали его во внешний div:

  1. Мое решение:

    #inner {
        background-color: yellow;    
    }
    #outer {
        background-color: red;
        padding-left: 50px;
        padding-bottom: 50px;
    }
    

Также есть 3 других возможных исправления:

  1. Автор @Jenti Dabhi добавляет display:inline-block к #inner div:

    #inner {
        background-color: yellow;
        margin-left: 50px;
        margin-bottom: 50px;
        display: inline-block;
    }
    
  2. Автор @Chris должен добавить overflow: auto в #outer div:

    #outer {
        overflow: auto;
        background-color: red;
    }
    
  3. Автор @Abhitalks - это добавить border в ваш #outer div:

    #outer {
        background-color: red; border: 1px solid gray;
    }
    
0
Florin Pop 27 Окт 2015 в 08:13

Дать границу внешнему div:

#inner {
    background-color: yellow;    
    margin-left: 80px;
    margin-bottom: 50px;
     
}
#outer {
    background-color: red;
    border:1px solid white;
      
}
<div id="outer">
    <div id="inner">
        test
    </div>
</div>
0
semirturgay 27 Окт 2015 в 08:08
Add This CSS

#inner {
    background-color: yellow;
    margin-left: 50px;
    margin-bottom: 50px;
    display: inline-block;
}
1
Jenti Dabhi 27 Окт 2015 в 08:01

У меня была та же проблема, просто добавьте overflow: auto в #outher div, и он исправит высоту родителей

#inner {
    background-color: yellow;    
    margin-left: 50px;
    margin-bottom: 50px;
}
#outer {
    overflow: auto;   /* ADDED */
    background-color: red;
}
<div id="outer">
    <div id="inner">
        test
    </div>
</div>
3
Kristijan Iliev 27 Окт 2015 в 08:05