CSSda chegaralarni yopishtirish nima?

Marginlarning qulab tushishi (margin collapsing) CSSda yonma-yon keladigan bloklarning vertikal marginlari bitta bo‘lib qolishi hodisasidir. Bu birlashtirilgan marginning o‘lchami, qulab tushayotgan marginlarning maksimal qiymati sifatida belgilanadi.

Qulash quyidagi holatlarda yuzaga keladi:

Yonma-yon elementlar orasida: Ikki yonma-yon elementning vertikal marginlari qulab tushadi.
```
<p>Paragraf 1</p>
<p>Paragraf 2</p>
```
Agar <p> ning margin-bottom va margin-top mos ravishda bo‘lsa, bu marginlar qulab tushishi mumkin.
Ota element va uning birinchi/oxirgi bolasi orasida: Agar ota elementda border, padding, display: flex, display: grid, overflow: hidden yoki boshqa formatlash konteksti yaratadigan xususiyatlar bo‘lmasa, uning yuqori margini birinchi bolaning margin-top bilan, shuningdek, ota elementning pastki margini oxirgi bolaning margin-bottom bilan qulab tushishi mumkin.
```
<div class="parent">
  <p class="child">Bolali element</p>
</div>
```
Bo‘sh elementda: Agar elementda mazmun bo‘lmasa (height: 0, border va padding bo‘lmasa), uning yuqori va pastki marginlari bir-biri bilan qulab tushishi mumkin.
```
<div class="empty"></div>
```

Qulash natijalarini ko‘rsatadigan jadval:

Margin 1	Margin 2	Qulash natijasi
10px	15px	15px
20px	-5px	20px
-10px	-15px	-10px

Marginlarning qulab tushishi faqat vertikal yo‘nalishda (margin-top va margin-bottom) yuzaga keladi. Gorizontal marginlar (margin-left va margin-right) hech qachon qulab tushmaydi.

Qulashni oldini olish uchun usullar mavjud, masalan, border, padding qo‘shish, display: flex, display: grid, overflow: hidden ni ishlatish yoki display: flow-root yordamida yangi formatlash kontekstini yaratish.