Почему добавление overflow: hidden делает работу поля дочернего элемента?

Когда я добавляю элемент типа h1 с margin: 30px 0;, поле выходит за пределы контейнера!

Я сталкивался с этой проблемой много раз раньше, и я решил ее с помощью overflow: hidden

Я хочу выяснить, в чем проблема и почему это решение работает?

Найдите JSFiddle здесь https://jsfiddle.net/LeoAref/zv6c2c2d/

.container {
  background: #ccc;
}
.container.overflow {
  overflow: hidden;
}
.secTitle {
  margin: 30px 0;
}
code {
  color: blue;
}
<!-- secTitle margin goes outside the container -->
<div class="container">
  <h1 class="secTitle">Container without <code>overflow: hidden</code></h1>
</div>

<!-- works fine here -->
<div class="container overflow">
  <h1 class="secTitle">Container with <code>overflow: hidden</code></h1>
</div>


html css overflow margin margins
person LeoAref    schedule 16.11.2015    source источник
comment
Почему вы не можете использовать отступы вместо этого? Вот для чего он предназначен!   -  person jbutler483    schedule 16.11.2015
comment
@jbutler483 jbutler483 Я могу использовать много других способов, но я хочу понять, почему это происходит.   -  person LeoAref    schedule 16.11.2015
comment
margin должен находиться за пределами элемента.   -  person jbutler483    schedule 16.11.2015

Ответы (3)


arrow_upward
5
arrow_downward

Почему это происходит?

В первом примере поля свернуты внутри родительский элемент.

Для некоторого контекста, вот соответствующая документация по сворачивающимся полям:

Блочная модель 8.3.1. Сворачивание полей

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

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

Существуют определенные правила, которые предотвратят разрушение полей.

Одно из указанных правил:

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

В вашем случае элемент имеет значение overflow, отличное от значения по умолчанию, visible, поскольку для него установлено значение hidden. Таким образом, поля не схлопываются и остаются внутри элемента.

Дополнительные обходные пути см. в документации.

person Josh Crozier    schedule 20.11.2015

arrow_upward
0
arrow_downward 

.container.overflow

Так должно быть

.container .overflow


.container {
    background: #ccc;
}

.container .overflow {
    overflow: hidden;
}

.secTitle {
    margin: 30px 0;
}

code {
    color: blue;
}
<!-- secTitle margin goes outside the container -->
<div class="container">
    <h1 class="secTitle">
        Container without 
        <code>overflow: hidden</code>
    </h1>
</div>

<!-- works fine here -->
<div class="container overflow">
    <h1 class="secTitle">
        Container with 
        <code>overflow: hidden</code>
    </h1>
</div>

person SIMDD    schedule 16.11.2015

arrow_upward
0
arrow_downward

Почему ? Потому что поля должны быть за пределами элемента, и здесь не учитываются поля h1. По умолчанию overflow виден и отображается за пределами контейнера h1. Это довольно сложно объяснить, но я старался! Надеюсь, я помог.

person Alteyss    schedule 16.11.2015
comment
@LeoAref Я добавил ответ, объясняющий почему, и сослался на официальную документацию. - person Josh Crozier; 20.11.2015