То, что упоминал @BoltClock, довольно солидно.
И здесь я просто хочу добавить еще несколько решений для этой проблемы.
отметьте это w3c_collapsing margin . Зеленые части - потенциальная мысль, как решить эту проблему.
Раствор 1
Поля между плавающим блоком и любым другим блоком не разрушаются (даже между плавающим элементом и его дочерними элементами в потоке).
это означает, что я могу добавить float:left к #outer или #inner demo1 .
также обратите внимание, что float сделает недействительным auto в поле.
Решение 2
Поля элементов, которые устанавливают новые контексты форматирования блока (такие как плавающие элементы и элементы с «переполнением», отличным от «видимого»), не разрушаются со своими дочерними элементами в потоке.
кроме visible, давайте поместим overflow: hidden в #outer. И этот способ кажется довольно простым и порядочным. Мне это нравится.
#outer{
width: 500px;
height: 200px;
background: #FFCCCC;
margin: 50px auto;
overflow: hidden;
}
#inner {
background: #FFCC33;
height: 50px;
margin: 50px;
}
Раствор 3
Поля абсолютно расположенных ящиков не разрушаются (даже при их дочерних элементах).
#outer{
width: 500px;
height: 200px;
background: #FFCCCC;
margin: 50px auto;
position: absolute;
}
#inner{
background: #FFCC33;
height: 50px;
margin: 50px;
}
или
#outer{
width: 500px;
height: 200px;
background: #FFCCCC;
margin: 50px auto;
position: relative;
}
#inner {
background: #FFCC33;
height: 50px;
margin: 50px;
position: absolute;
}
эти два метода нарушат нормальный поток div
Решение 4
Поля блоков встроенного блока не сворачиваются (даже при их дочерних элементах в потоке).
совпадает с @ enderskill
Решение 5
Нижний край элемента уровня блока в потоке всегда сворачивается с верхним пределом его следующего элемента уровня блока в потоке, если только у этого элемента нет зазора.
Это не имеет большого отношения к вопросу, так как это разрыв между братьями и сестрами. как правило, это означает, что в приставке margin-bottom: 30px, а в соседней - margin-top: 10px. Общая разница между ними составляет 30px вместо 40px.
Раствор 6
Верхнее поле элемента блока в потоке сворачивается с верхним полем его первого дочернего элемента уровня потока, если у элемента нет верхней границы, нет верхнего отступа и дочерний элемент не имеет свободного пространства.
Это очень интересно, и я могу просто добавить одну верхнюю границу
#outer{
width: 500px;
height: 200px;
background: #FFCCCC;
margin: 50px auto;
border-top: 1px solid red;
}
#inner {
background: #FFCC33;
height: 50px;
margin: 50px;
}
И также <div> по умолчанию является уровнем блока, поэтому вам не нужно объявлять его намеренно. Извините за невозможность опубликовать более 2 ссылок и изображений из-за моей репутации новичка. По крайней мере, вы знаете, откуда возникла проблема, когда в следующий раз увидите нечто подобное.