რა არის საზღვრების შეკუმშვა 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-ის გამოყენებით.