CSS-ში საზღვრების ჩამოშლა რა არის?

სხლოპვა საზღვრების (margin collapsing) — ეს CSS-ით გამოვლენაა, როდესაც ორი ან მეტი მიმდებარე ბლოკის ვერტიკალური საზღვრები ერთიანდება ერთ საზღვრად. ამ საერთო საზღვრების ზომა განსაზღვრულია ამ სხლოპვის საზღვრების უმაღლესი მნიშვნელობით.

სხლოპვის ძირითადი წესები:

• სხლოპვა ეხება მხოლოდ ვერტიკალურ საზღვრებს (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 ელემენტებისთვის.
• გამოიყენეთ აბსოლუტური პოზიციონირება.