Mis on äärte kokkuvarisemine CSS-is?

Rea limiti (margin collapsing) on CSS-il nähtus, kus lähestikukohad blokeerivad vertikaalseid piire ühinema. Selle ühendatud piiri suurus määratakse kui suurim ühendatud piiride väärtus.

Rea limiti toimub järgmistes olukordades:

Naabri elementide vahel: Kaks naabri elementi ühendavad oma vertikaalsed piirid.
```
<p>Lõik 1</p>
<p>Lõik 2</p>
```
Kui <p>-l on vastavalt margin-bottom ja margin-top, võivad need piirid ühineda.
Vanema ja esimese/viimase lapse vahel: Kui vanemal puudub border, padding, display: flex, display: grid, overflow: hidden ja muud omadused, mis loovad formaadikonteksti, võib tema ülemine piir ühineda esimese lapse margin-top-ga. Sarnaselt võib vanema alumine piir ühineda viimase lapse margin-bottom-ga.
```
<div class="parent">
  <p class="child">Lapse element</p>
</div>
```
Tühi element: Kui elemendil puudub sisu (height: 0, border ja padding puuduvad), võivad tema ülemine ja alumine piir ühineda.
```
<div class="empty"></div>
```

Rea limiti tulemusi illustreeriv tabel:

Margin 1	Margin 2	Tulemuseks on
10px	15px	15px
20px	-5px	20px
-10px	-15px	-10px

Rea limiti toimub ainult vertikaalses suunas (margin-top ja margin-bottom). Horisontaalsed piirid (margin-left ja margin-right) ei ühine kunagi.

Rea limiti vältimiseks on erinevaid meetodeid, näiteks border, padding lisamine, display: flex, display: grid, overflow: hidden või uue formaadikonteksti loomine display: flow-root kasutades.