Margin birlashuvi
CSS margin birlashishi (collapse)
Margin collapse — ikkita margin bitta marginga birlashib ketishidir.
Elementlarning yuqori va pastki marginlari ba’zan ikkala marginning eng kattasiga teng bitta margin sig‘imlab qoladi (collapse).
Eslatma: Margin collapse faqat yuqori va pastki marginlarda sodir bo‘ladi! Chap va o‘ng marginlarda emas!
Quyidagi misolda <h1> elementining pastki margini 50px va <h2> elementining yuqori margini 20px. Demak, <h1> va <h2> orasidagi vertikal margin jami 70px (50px + 20px) bo‘lishi kerak edi. Biroq margin collapse tufayli haqiqiy margin 50px bo‘lib qoladi:
Misol
Margin collapse namoyishi:
h1 {
margin-bottom: 50px;
}
h2 {
margin-top: 20px;
}
O‘zingiz sinab ko‘ring »
Quyidagi misolda har bir <p> elementining yuqori margini 30px va pastki margini 30px. Demak, <p> elementlari orasidagi vertikal margin 60px (30px + 30px) bo‘lishi kerak edi. Biroq margin collapse tufayli haqiqiy margin 30px bo‘lib qoladi:
Misol
Margin collapse namoyishi:
p {
margin-top: 30px;
margin-bottom: 30px;
}
O‘zingiz sinab ko‘ring »
Barcha CSS margin xossalari
| Xususiyat | Tavsif |
|---|---|
| margin | Barcha margin xossalarini bitta deklaratsiyada belgilash uchun qisqartma xossa |
| margin-bottom | Elementning pastki chetini o‘rnatadi |
| margin-left | Elementning chap chetini o‘rnatadi |
| margin-right | Elementning o‘ng chetini o‘rnatadi |
| margin-top | Elementning yuqori chetini o‘rnatadi |
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!