tgoop.com/prog_way_blog/232
Last Update:
Схлопывание отступов CSS
Схлопывание отступов — механизм в CSS, при котором верхние и нижние внешние отступы двух соседних элементов могут объединяться в один отступ, если они расположены друг над другом. Это поведение может вызывать лишнее недопонимание.
Если рассмотреть ситуацию на фото, прикрепленное к посту, то можно увидеть два блока, верхний из которых имеет margin-bottom: 100px
, а нижний — margin-top: 70px
. Казалось бы, очевидно, что итоговый отступ между блоками будет 170px
, но на самом деле это не так. В таком случае, отступы объединятся и будет выбрано и применено максимальное значение из двух: max(100px, 70px) => 100px
.
Чтобы избежать схлопывания, достаточно использовать связку из разных отступов, например margin
для верхнего элемента и padding
для нижнего. Но такой способ я считаю всё таки костыльным. Гораздо лучше объединить два блока в родительский flex
контейнер и использовать свойство gap
для задания отступов между всеми элементами flex
группы:
<div class="container">
<div>Верхний</div>
<div>Нижний</div>
</div>
.container {
display: flex;
flex-direction: column;
gap: 170px;
}
Такой способ гораздо более надёжный и контролируемый, а также читается легче.
Спасибо за прочтение, это важно для меня ❤️
#web #theory
BY progway — программирование, IT

Share with your friend now:
tgoop.com/prog_way_blog/232