CSS-də sərhədlərin yığılması nədir?

CSS-də margin collapsing (kənarların çökməsi) hadisəsi, yan-yana yerləşən iki və ya daha çox blokun şaquli sərhədlərinin birləşərək tək bir sərhəd yaratmasıdır. Bu ümumi sərhədin ölçüsü, çökmə zamanı ən böyük dəyərə görə müəyyən edilir.

Əsas qaydalar:

• Yalnız şaquli sərhədlər (margin-top və margin-bottom) çökmə edir. Üfüqi sərhədlər çökməz.
• Yalnız qonşu elementlərin sərhədləri, aralarında başqa element, padding, border və ya blok içeriyi yoxdursa, çökmə edir.
• Birinci uşaq elementin yuxarı sərhədi, aralarında padding, border və ya başqa məzmun yoxdursa, onun valideyninin yuxarı sərhədi ilə çökmə edir.
• Son uşaq elementin aşağı sərhədi, aralarında padding, border və ya başqa məzmun yoxdursa, onun valideyninin aşağı sərhədi ilə çökmə edir.
• Boş elementin yuxarı və aşağı sərhədləri, əgər padding, border və ya məzmun yoxdursa, bir-biri ilə çökmə edə bilər.
• Əgər çökmə edən sərhədlərdən biri mənfidirsə, yekun ölçü müsbət və mənfi dəyərlərin cəmidir (və ya hər ikisi mənfidirsə və cəm mənfidir, müsbət dəyər alınır).

Nümunə:

<div class="box1">Element 1</div>
<div class="box2">Element 2</div>

.box1 {
  margin-bottom: 20px;
}

.box2 {
  margin-top: 30px;
}

Bu halda, box1 və box2 arasındakı şaquli məsafə 30px olacaq (20px və 30px arasındakı ən böyük dəyər), 50px deyil.

Qarşısını alma yolları:

• Elementlər arasında padding və ya border əlavə edin.
• Yeni formatlama bloku yaradın (məsələn, overflow: hidden, display: flow-root və ya yüzen elementlər istifadə edərək).
• Elementlər üçün display: inline-block, display: flex və ya display: grid istifadə edin.
• Absolut yerləşdirmə istifadə edin.