CSSте чектердин жабышуусу эмнеге?

Шектөө чогулушу (margin collapsing) — CSSте көрүнүш, анда жакын жайгашкан блоктордун вертикалдык чектери бирикет. Бул бириккен чектин өлчөмү чогулуп жаткан чекелердин эң чоң мааниси катары аныкталат.

Шектөө төмөнкү учурларда болот:

Жакынкы элементтер ортосунда: Эки жакын элементтин вертикалдык чектери чогулуп калат.
```
<p>Параграф 1</p>
<p>Параграф 2</p>
```
Эгер <p> элементтеринин margin-bottom жана margin-top бар болсо, бул чекелер чогулуп калышы мүмкүн.
Ата-эне менен биринчи/акыркы балалык элемент ортосунда: Эгер ата-эне border, padding, display: flex, display: grid, overflow: hidden жана башка форматтоо контекстин түзүүчү касиеттерге ээ болбосо, анын жогорку чектери биринчи балалык элементтин margin-top менен чогулуп калат. Ошондой эле, ата-эненин төмөнкү чектери акыркы балалык элементтин margin-bottom менен чогулуп калат.
```
<div class="parent">
  <p class="child">Балалык элемент</p>
</div>
```
Бос элементте: Эгер элементтин мазмуну жок болсо (height: 0, border жана padding жок), анын жогорку жана төмөнкү чектери бири-бири менен чогулуп калат.
```
<div class="empty"></div>
```

Чогулушунун натыйжаларын көрсөтүүчү таблица:

Margin 1	Margin 2	Чогулуштун натыйжасы
10px	15px	15px
20px	-5px	20px
-10px	-15px	-10px

Шектөө чогулушу тек гана вертикалдык багытта (тек гана margin-top жана margin-bottom) болот. Горизонталдык чектер (margin-left жана margin-right) эч качан чогулбайт.

Шектөөнү алдын алуу үчүн ыкмалар бар, мисалы, border, padding кошуу, display: flex, display: grid колдонуу, overflow: hidden же блоктун жаңы форматтоо контекстин түзүү үчүн display: flow-root колдонуу.