margin
Misol
<p> elementining to‘rttala tomoni uchun tashqi bo‘shliqni (margin) 35 piksel qilib o‘rnating:
p {
margin: 35px;
}
O‘zingiz sinab ko‘ring »
Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.
Ta’rif va qo‘llanilishi
margin xususiyati element uchun tashqi bo‘shliqlarni (margin) o‘rnatadi va quyidagi xususiyatlar uchun qisqartma xususiyatdir:
Agar margin xususiyati to‘rtta qiymatga ega bo‘lsa:
- margin: 10px 5px 15px 20px;
- yuqori margin 10px
- o‘ng margin 5px
- pastki margin 15px
- chap margin 20px
Agar margin xususiyati uchta qiymatga ega bo‘lsa:
- margin: 10px 5px 15px;
- yuqori margin 10px
- o‘ng va chap marginlar 5px
- pastki margin 15px
Agar margin xususiyati ikkita qiymatga ega bo‘lsa:
- margin: 10px 5px;
- yuqori va pastki marginlar 10px
- o‘ng va chap marginlar 5px
Agar margin xususiyati bitta qiymatga ega bo‘lsa:
- margin: 10px;
- to‘rttala margin ham 10px
Eslatma: Manfiy qiymatlarga ruxsat beriladi.
| Standart qiymat: | 0 |
|---|---|
| Meros qilinadi: | yo‘q |
| Animatsiya qilinadi: | ha, alohida xususiyatlarga qarang. animatable haqida o‘qing Sinab ko‘ring |
| Versiya: | CSS1 |
| JavaScript sintaksisi: | object.style.margin="100px 50px" Sinab ko‘ring |
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar xususiyatni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Xususiyat | |||||
|---|---|---|---|---|---|
| margin | 1.0 | 6.0 | 1.0 | 1.0 | 3.5 |
CSS sintaksisi
margin: length|auto|initial|inherit;
Xususiyat qiymatlari
| Qiymat | Tavsif | Demo |
|---|---|---|
| length | Tashqi bo‘shliqni px, pt, cm va hokazolarda belgilaydi. Standart qiymati — 0. Manfiy qiymatlarga ruxsat beriladi. Uzunlik birliklari haqida o‘qing | Demo ❯ |
| % | Tashqi bo‘shliqni o‘z ichiga olgan element kengligining foizida belgilaydi | Demo ❯ |
| auto | Tashqi bo‘shliqni brauzer hisoblaydi | Demo ❯ |
| initial | Bu xususiyatni standart qiymatiga o‘rnatadi. initial haqida o‘qing | |
| inherit | Bu xususiyatni ota elementidan meros qilib oladi. inherit haqida o‘qing |
Margin qulashi
Elementlarning yuqori va pastki marginlari ba’zan ikkala margindan kattasiga teng bo‘lgan bitta marginga birlashib ketadi (qulaydi).
Bu gorizontal (chap va o‘ng) marginlarda sodir bo‘lmaydi! Faqat vertikal (yuqori va pastki) marginlarda!
Quyidagi misolga qarang:
Yuqoridagi misolda <p class="a"> elementining yuqori va pastki margini 30px. <p class="b"> elementining yuqori va pastki margini 20px.
Demak, <p class="a"> va <p class="b"> orasidagi vertikal margin 50px (30px + 20px) bo‘lishi kerak. Lekin margin qulashi tufayli haqiqiy margin 30px bo‘lib qoladi!
Ko‘proq misollar
Misol
<p> elementi uchun tashqi bo‘shliqni yuqori va pastdan 35 piksel, o‘ng va chapdan 70 piksel qilib o‘rnating:
p {
margin: 35px 70px;
}
O‘zingiz sinab ko‘ring »
Misol
<p> elementi uchun tashqi bo‘shliqni yuqoridan 35 piksel, o‘ng va chapdan 70 piksel, pastdan 50 piksel qilib o‘rnating:
p {
margin: 35px 70px 50px;
}
O‘zingiz sinab ko‘ring »
Misol
<p> elementi uchun tashqi bo‘shliqni yuqoridan 35 piksel, o‘ngdan 70 piksel, pastdan 50 piksel va chapdan 90 piksel qilib o‘rnating:
p {
margin: 35px 70px 50px 90px;
}
O‘zingiz sinab ko‘ring »
Tegishli sahifalar
CSS darsligi: CSS margin
CSS darsligi: CSS quti modeli
HTML DOM ma’lumotnomasi: margin xususiyati
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!