CSSте чектердин чогулушу эмне?

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

Жабышып калыштын негизги эрежелери:

• Жабышып калыш only вертикалдык чекиттерге (margin-top жана margin-bottom) тиешелүү. Горизонталдык чекиттер жабышпайт.
• Жабышып калыш гана көршү элементтердин чекиттерине тиешелүү, эгер алардын ортосунда башка элементтер, толтуруу (padding), чекиттер (border) же блок мазмуну жок болсо.
• Биринчи баланын жогорку чекити анын ата-энесинин жогорку чекитине жабышат, эгер алардын ортосунда padding, border же башка мазмун жок болсо.
• Соңку баланын төмөнкү чекити анын ата-энесинин төмөнкү чекитине жабышат, эгер алардын ортосунда padding, border же башка мазмун жок болсо.
• Бош элементтин жогорку жана төмөнкү чекиттери бири-бирине жабышышы мүмкүн, эгер алардын ортосунда padding, border же мазмун жок болсо.
• Эгер жабышып жаткан чекиттердин бири терс болсо, жыйынтык өлчөмү оң жана терс маанилердин суммасына (же абсолюттук мааниге, эгер экөө тең терс жана жалпы мааниси нөлдөн аз болсо) барабар болот.

Мисал:

<div class="box1">Элемент 1</div>
<div class="box2">Элемент 2</div>

.box1 {
  margin-bottom: 20px;
}

.box2 {
  margin-top: 30px;
}

Бул учурда box1 жана box2 ортосундагы вертикалдык аралык 30px болот (20px жана 30pxдин эң чоңу), 50px эмес.

Жабышып калыштан алдын алуу жолдору:

• Элементтердин ортосуна padding же border кошуу.
• Жаңы форматтоо блогун түзүү (мисалы, overflow: hidden, display: flow-root же жылдырма элементтер менен).
• Элементтер үчүн display: inline-block, display: flex же display: grid колдонуу.
• Абсолюттук жайгаштыруу колдонуу.