Почему этот CSS-стиль не работает?

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

Что я ожидал:

Что я получаю:

Код:

#outer {
    	width: 500px; 
    	height: 200px; 
    	background: #FFCCCC;
    	margin: 50px auto 0 auto;
    	display: block;
}
#inner {
    	background: #FFCC33;
    	margin: 50px 50px 50px 50px;
    	padding: 10px;
    	display: block;
}

<div id="outer">
  <div id="inner">
  	Hello world!
  </div>
</div>

В школах W3 нет объяснения, почему маржа ведет себя так.

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

Вот соответствующие пункты из спецификации W3C:

8.3.1 Сокращение полей

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

Смешение вертикальных полей рухнет [...]

Два поля соприкасаются, если и только если:

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

Чтобы предотвратить разрушение поля, можно выполнить любое из следующих действий:

• Плавай любой из твоих divэлементов
• Сделайте любой из ваших divэлементов встроенными блоками
• Набор overflowиз #outerкauto (или любое значение , отличное visible)

Причина, по которой вышеуказанные параметры предотвращают разрушение поля, заключается в следующем:

• Поля между плавающим блоком и любым другим блоком не разрушаются (даже между плавающим элементом и его дочерними элементами в потоке).
• Поля элементов, которые устанавливают новые контексты форматирования блока (такие как плавающие элементы и элементы с «переполнением», отличным от «видимого»), не разрушаются вместе со своими дочерними элементами в потоке.
• Поля встроенных блоков не разрушаются (даже при наличии дочерних элементов).

Левые и правые поля ведут себя так, как вы ожидаете, потому что:

Горизонтальные поля никогда не разрушаются.

Попробуйте использовать display: inline-block;на внутреннем div.

#outer {
    width:500px; 
    height:200px; 
    background:#FFCCCC;
    margin:50px auto 0 auto;
    display:block;
}
#inner {
    background:#FFCC33;
    margin:50px 50px 50px 50px;
    padding:10px;
    display:inline-block;
}

То, что упомянул @BoltClock, довольно солидно. И здесь я просто хочу добавить еще несколько решений для этой проблемы. проверьте это поле w3c_collapsing . Зеленые части - потенциальная мысль, как эта проблема может быть решена.

Решение 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 ссылок и изображений из-за моей репутации новичка. По крайней мере, вы знаете, откуда возникла проблема, когда в следующий раз увидите нечто подобное.

Не уверен, почему то, что у вас есть, не работает, но вы можете добавить

overflow: auto;

к внешнему div.

Если вы добавляете какие-либо отступы #outer, это работает.

демонстрация

#outer {
    width:500px; 
    height:200px; 
    background:#FFCCCC;
    margin:50px auto 0 auto;
    display:block;
    padding-top:1px;
}

Не совсем понятно почему, но изменив внутренний CSS на

display:inline-block;

кажется, работает;

Не отвечает на вопрос «почему» (должно быть что-то со складывающимся запасом), но кажется, что самый простой / логичный способ сделать то, что вы пытаетесь сделать, это просто добавить padding-topк внешнему div :

http://jsfiddle.net/hpU5d/1/

Небольшое замечание - нет необходимости устанавливать div, display:block;если в вашем коде нет чего-то другого, говорящего, что он не должен быть блоком.

попробуй это:

#outer {
    width:500px; 
    height:200px; 
    background:#FFCCCC;
    margin:50px auto 0 auto;
    display:table;
}
#inner {
    background:#FFCC33;
    margin:50px 50px 50px 50px;
    padding:10px;
    display:block;
}​

http://jsfiddle.net/7AXTf/

Удачи

Я думаю , настройка положения свойство #inner дел до относительно может также помочь достигнуть эффекта. Но в любом случае я попробовал оригинальный код, вставленный в Вопрос по IE9 и последней версии Google Chrome, и они уже дают желаемый эффект без каких-либо изменений.

Используйте padding-top:50pxдля внешнего div. Что-то вроде этого:

#outer {
    width:500px; 
    height:200px; 
    background:#FFCCCC;
    margin:50px auto 0 auto;
    display:table;}

Примечание: заполнение увеличит размер вашего div. В этом случае, если размер вашего div важен, я имею в виду, должен ли он иметь определенную высоту. уменьшить высоту на 50 пикселей:

#outer {
    width:500px; 
    height:150px; 
    background:#FFCCCC;
    margin:50px auto 0 auto;
    display:table;}

Вы пробовали! Важно прежде всего, это заставит все

margin:50px 50px 50px 50px !important;

Просто для быстрого исправления попробуйте обернуть ваши дочерние элементы в такой divэлемент -

<div id="outer">
   <div class="divadjust" style="padding-top: 1px">
      <div id="inner">
         Hello world!
      </div>
   </div>
</div>

Край innerdiv не рухнет из-за отступов 1pxмежду ними outerи innerdiv. Таким образом, по логике у вас будет 1pxдополнительное пространство вместе с существующим полем innerdiv.