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



tgoop.com/prog_way_blog/232
Create:
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

View MORE
Open in Telegram


Telegram News

Date: |

Write your hashtags in the language of your target audience. A Telegram channel is used for various purposes, from sharing helpful content to implementing a business strategy. In addition, you can use your channel to build and improve your company image, boost your sales, make profits, enhance customer loyalty, and more. Hashtags The best encrypted messaging apps Ng, who had pleaded not guilty to all charges, had been detained for more than 20 months. His channel was said to have contained around 120 messages and photos that incited others to vandalise pro-government shops and commit criminal damage targeting police stations.
from us


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