От автора: схлопывание отступов CSS — это то, что упоминается в каждой первой или второй главе каждой книги по CSS. Когда я давным-давно начинал изучать таблицы стилей, я конечно, читал и об этом. Эти воспоминания немного затерлись, поэтому пришло время освежить мои знания, давайте начнем!
Схлопывание отступов заключается в том, что когда два или более отступа — вертикальных, сверху или снизу — примыкают друг к другу, эти отступы должны связываться друг с другом каким-то образом.
В основном это было необходимо из-за абзацев и других элементов, связанных с типографикой. Если вы используете как верхний, так и нижний отступ, вам не нужно заботиться о точных значениях — суммах обоих — потому что если два отступа схлопываются, больший победит.
Полезность этого очевидна. Если вы хотите установить для отступа значение в 30px, вам не нужно, чтобы следующий элемент также добавил к отступу полю 30px. Таким образом, они схлопываются, и интервал между элементами будет составлять 30px, потому что каждый отступ имеет величину только 30px.
Схлопывание отступов работает только со значениями margin-top и margin-bottom.
Несколько отступов
До сих пор все было ясно, как день; но все начинает усложняться, когда мы переходим к взаимосвязи родительский / дочерний элемент (и к исключениям).
Раньше я упоминал о множественности — в данном случае более двух — значений. Схлопывание также работает, когда элемент внутри родительского элемента обернут еще в один контейнер, который также имеет отступ.
Наличие родительского div может дать неожиданный результат, потому что ваш внутренний элемент — с отступом — может выходить за границы родительского элемента. Очевидно, проблемы могут возникать с первым и последним дочерними элементами.
Я использую в примерах значения пикселях, но в реальных проектах лучше использовать для отступов относительные единицы.
В нашем демонстрационном примере у нас есть два абзаца — второй внутри div — и один элемент div. Для .second-paragraph задано значение margin-bottom в 20px, для .third-paragraph задано значение margin-top в 60px и для div задано margin-top ноль (ноль также имеет значение). И значение 60px перекрывает другие и определяет отступ между этими элементами. Математика проста — большее значение перекрывает меньшее.
В примере CodePen я попытался проиллюстрировать отступы: верхний имеет розовый цвет, нижний — зеленый цвет, когда они объединяются, вы видите голубовато-серый цвет (потому что они перекрывают друг друга). Блок div имеет светло-желтый фон. На первый взгляд это может показаться немного хаотичным, но если вы посмотрите код, вы поймете, в чем суть.
Отступы не объединяются, когда
Бывают случаи, когда мы хотим контролировать или отключить схлопывание отступов; как правило, это актуально, когда у нас есть отношение родитель-потомок:
В случае margin-top, если между отступом родительского элемента и отступом первого дочернего элемента есть какие-либо поля, граница, встроенная часть, контекст с блочным форматированием или зазор.
В случае margin-bottom, если между родительским и последним дочерним элементом есть какие-либо поля, границы, встроенные элементы или height (height, min-height, max-height).
Также отступ дочернего элемента не объединяется при использовании объявления display: flex; для контейнера.
Объявление overflow: auto; (работает со всеми значениями, кроме visible) для родительского элемента, также предотвращает схлопывание отступов.
Элементы, отображаемые со значениями table-cell или table-row, также не будут схлопываться, потому что эти элементы не имеют отступов.
В случае пустого элемента схлопывание не будет происходить, если у него есть поля, граница, встроенный контент, высота или минимальная высота, которые разделяют элементы.
В случае соседних элементов одного уровня схлопывание не происходит, когда последний элемент очищает float.
Использование отрицательных отступов
Мы также можем задавать отступы с отрицательными значениями. Если у вас есть положительное (100px) и отрицательное (-50px) значения, суммарный отступ будет определяться, как положительный — отрицательный: 100px + (-50px) = 50px.
Если у вас есть два отрицательных значения, учитывается большее по модулю отрицательное значение (не то, которое ближе к нулю). Например, если у нас есть -100px и -50px, будет учитываться -100px.
Полезные ссылки
Для получения дополнительной информации о контексте с блочным форматированием посетите сайт MDN.
Автор: Adam Laki
Источник: https://pineco.de/
Редакция: Команда webformyself.
