progway — программирование, IT

Схлопывание отступов 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

❤37👍12🐳5🔥2🍌1🤝1

www.tgoop.com/prog_way_blog/232

1.87K viewsApr 19, 2024 at 13:03

Схлопывание отступов 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;
}

BY progway — программирование, IT