margin-top
Misol
<p> elementining yuqori tashqi bo‘shlig‘ini 25 piksel qilib o‘rnating:
p.ex1 {
margin-top: 25px;
}
O‘zingiz sinab ko‘ring »
Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.
Ta’rif va qo‘llanilishi
margin-top xususiyati elementning yuqori tashqi bo‘shlig‘ini o‘rnatadi.
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.marginTop="100px" Sinab ko‘ring |
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar xususiyatni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Xususiyat | |||||
|---|---|---|---|---|---|
| margin-top | 1.0 | 6.0 | 1.0 | 1.0 | 3.5 |
CSS sintaksisi
margin-top: length|auto|initial|inherit;
Xususiyat qiymatlari
| Qiymat | Tavsif | Demo |
|---|---|---|
| length | Yuqori tashqi bo‘shliqni px, pt, cm va hokazolarda qat’iy belgilaydi. Standart qiymati — 0px. Manfiy qiymatlarga ruxsat beriladi. Uzunlik birliklari haqida o‘qing | Demo ❯ |
| % | Yuqori tashqi bo‘shliqni o‘z ichiga olgan element kengligining foizida belgilaydi | Demo ❯ |
| auto | Yuqori 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> elementining yuqori tashqi bo‘shlig‘ini konteyner kengligining 10% iga o‘rnating:
p.ex1 {
margin-top: 10%;
}
O‘zingiz sinab ko‘ring »
Misol
<p> elementining yuqori tashqi bo‘shlig‘ini 2 em qilib o‘rnating:
p.ex1 {
margin-top: 2em;
}
O‘zingiz sinab ko‘ring »
Tegishli sahifalar
CSS darsligi: CSS margin
HTML DOM ma’lumotnomasi: marginTop xususiyati
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!