Вертикальные поля исчезают, если родительский элемент настроен на переполнение: видимый - PullRequest
Новая
       2

Вертикальные поля исчезают, если родительский элемент настроен на переполнение: видимый

5 голосов
/ 16 марта 2012

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

Мне кажется, я понимаю, как переполнение должно работать, когда содержимое элемента не может в него поместиться, но я не понимаю, что происходит с полями.

Вот пример: (http://jsfiddle.net/VrVc7/) 

#outer {
    background-color:#EEE;
    overflow:hidden;
}

#inner {
    margin: 30px;
    padding: 5px;
    background-color:#ABE;
}

<div id="outer">
    <div id="inner">abc</div>
</div>

Ответы [ 3 ]

7 голосов
/ 16 марта 2012

Это называется collapsing margin.Согласно W3c

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

Как предотвратить от collapsing margin.

  1. Поля междуплавающий блок и любой другой блок не сворачиваются (даже между плавающим элементом и его дочерними элементами в потоке).
  2. Поля элементов, которые устанавливают новые контексты форматирования блока (такие как плавающие элементы и элементы с «переполнением», отличным от'visible') не сворачиваются со своими дочерними элементами в потоке.
  3. Поля абсолютно расположенных блоков не сворачиваются (даже со своими дочерними элементами в потоке).
  4. Поля встроенного блокаблоки не сворачиваются (даже со своими дочерними элементами в потоке).
  5. Нижнее поле элемента уровня блока в потоке всегда разрушается вместе с верхним полем его следующего элемента уровня уровня потока в потоке,если только у этого родного брата нет свободного места.
  6. Верхнее поле элемента блока в потоке сворачивается с верхним полем его первого дочернего элемента уровня потока, если элементУ ent нет верхней границы, нет верхнего отступа, а у дочернего элемента нет свободного пространства.
  7. Нижнее поле блока входного потока с высотой «auto» и «min-height» изноль сворачивается с последним нижним полем его нижестоящего входного потока, если у блока нет нижнего отступа и нижней границы, а нижнее поле дочернего элемента не сворачивается с верхним полем, имеющим зазор.
  8. Собственный блокотступы поля, если свойство 'min-height' равно нулю, и у него нет ни верхней, ни нижней границ, ни верхнего или нижнего отступа, а также значение 'height' равно 0 или 'auto', и оно не содержит строкового блокаи все его входящие детские поля (если таковые имеются) разрушаются.
4 голосов
/ 16 марта 2012

Это из-за уменьшения полей:

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

Итак, переполнение: скрытое разделит пропавшие поля с оставшимися внутри. Вы можете нарушить сжатие полей, задав для внешнего div отступ или рамку. Чтобы они не соприкасались друг с другом и поэтому не рухнули

http://www.howtocreate.co.uk/tutorials/css/margincollapsing

1 голос
/ 16 марта 2012

Я знаю, что это то, на что это похоже.Но то, что на самом деле здесь происходит, называется разрушением маржи.Большую часть времени, если у родителя есть запас, или если у двоих братьев и сестер есть запас, тогда на коленях друг друга.Представьте, что у вас есть div с тремя детьми: 

|--|
|[]|
|[]|
|[]|
|--|

Если вы поставите поле 10 для детей.Всего будет 10 вертикальных интервалов между каждым из детей, даже если вы ожидаете, что их будет 20. Это потому, что если поля разделены, они свернут друг в друга.

В любом случае, Google это так, чтообъясню лучше, чем когда-либо.

...