მარჟების ჩაკეცვა (margin collapse) რა არის და რა მიზნით გამოიყენება?

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

მარგინალების გაერთიანება ხდება შემდეგ შემთხვევებში:

• მეზობელი ელემენტები: ერთ ელემენტს აქვს margin-bottom და შემდეგს margin-top.
• მშობელი და პირველი/ბოლო შვილი: მშობლის და მისი პირველი ან ბოლო შვილის margin-top და margin-bottom. ეს ხდება თუ მათ შორის არ არის საზღვარი (border), პადინგი (padding), inline შინაარსი ან თუ მშობელი არ არის flex/grid კონტეინერი.
• ცარიელი ბლოკები: თუ მათში შინაარსი, საზღვარი ან პადინგი არ არის, მაშინ მათი margin-top და margin-bottom იკვრება.

მაგალითად მეზობელი ელემენტებისთვის:

<div style="margin-bottom: 20px;">ელემენტი 1</div>
<div style="margin-top: 30px;">ელემენტი 2</div>

ამ შემთხვევაში, ელემენტებს შორის დაშორება იქნება 30px, არა 50px.

მშობელი და პირველი შვილი:

<div style="margin-top: 40px;">
  <div style="margin-top: 30px;">შვილის ელემენტი</div>
</div>

დაშორება მშობლის ზედა ზღვარსა და შინაარსს შორის იქნება 40px.

რა მიზნით გამოიყენება:

მარგინალების გაერთიანება ეხმარება შენარჩუნდეს პროგნოზირებადი ვერტიკალური დაშორებები ბლოკებს შორის, თავიდან აიცილოს ზედმეტი სივრცეები. ეს ხელს უწყობს ტიპოგრაფიული ვერტიკალური რითმის შექმნას, რადგან დიზაინერები დამოუკიდებლად ადგენენ მარგინალებს პარაგრაფებისთვის ან სათაურებისთვის, და ბრაუზერი თავად იზრუნებს სივრცის სწორად გაერთიანებაზე.

როგორ თავიდან აიცილოთ:

• მეზობელი ელემენტების ან მშობელი და შვილის შორის საზღვრის (border) დამატება.
• პადინგის (padding) დამატება მათ შორის.
• overflow თვისების გამოყენება მნიშვნელობით, რომელიც არ არის visible.
• ფლოტის (float) გამოყენება.
• პოზიციონირების absolute ან fixed გამოყენება.
• ელემენტების გადაკეთება Flexbox ან Grid კონტექსტში.
• ელემენტის inline-block-ად გადაკეთება.

/* მშობელი და შვილისთვის თავიდან აცილება */
.parent {
  border-top: 1px solid transparent; /* ან padding-top */
}

/* მეზობელი ელემენტებისთვის თავიდან აცილება */
.element + .element {
  margin-top: 0; /* ან border-top */
}