padding
Misol
<p> elementining to‘rttala tomoni uchun ichki bo‘shliqni (padding) 35 piksel qilib o‘rnating:
p {
padding: 35px;
}
O‘zingiz sinab ko‘ring »
Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.
Ta’rif va qo‘llanilishi
Elementning ichki bo‘shlig‘i (padding) — uning kontenti va chegarasi orasidagi bo‘sh joy.
padding xususiyati quyidagilar uchun qisqartma xususiyatdir:
Eslatma: Padding element ichida qo‘shimcha bo‘sh joy hosil qiladi, margin esa element atrofida qo‘shimcha bo‘sh joy hosil qiladi.
Bu xususiyat birdan to‘rttagacha qiymatga ega bo‘lishi mumkin.
Agar padding xususiyati to‘rtta qiymatga ega bo‘lsa:
- padding:10px 5px 15px 20px;
- yuqori padding 10px
- o‘ng padding 5px
- pastki padding 15px
- chap padding 20px
Agar padding xususiyati uchta qiymatga ega bo‘lsa:
- padding:10px 5px 15px;
- yuqori padding 10px
- o‘ng va chap padding 5px
- pastki padding 15px
Agar padding xususiyati ikkita qiymatga ega bo‘lsa:
- padding:10px 5px;
- yuqori va pastki padding 10px
- o‘ng va chap padding 5px
Agar padding xususiyati bitta qiymatga ega bo‘lsa:
- padding:10px;
- to‘rttala padding ham 10px
Eslatma: Manfiy qiymatlarga ruxsat berilmaydi.
| 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.padding="100px 20px" Sinab ko‘ring |
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar xususiyatni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Xususiyat | |||||
|---|---|---|---|---|---|
| padding | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
CSS sintaksisi
padding: length|initial|inherit;
Xususiyat qiymatlari
| Qiymat | Tavsif | Demo |
|---|---|---|
| length | Ichki bo‘shliqni px, pt, cm va hokazolarda belgilaydi. Standart qiymati — 0. Uzunlik birliklari haqida o‘qing | Demo ❯ |
| % | Ichki bo‘shliqni o‘z ichiga olgan element kengligining foizida belgilaydi | Demo ❯ |
| initial | Bu xususiyatni standart qiymatiga o‘rnatadi. initial haqida o‘qing | |
| inherit | Bu xususiyatni ota elementidan meros qilib oladi. inherit haqida o‘qing |
Ko‘proq misollar
Misol
<p> elementi uchun ichki bo‘shliqni yuqori va pastdan 35 piksel, o‘ng va chapdan 70 piksel qilib o‘rnating:
p {
padding: 35px 70px;
}
O‘zingiz sinab ko‘ring »
Misol
<p> elementi uchun ichki bo‘shliqni yuqoridan 35 piksel, o‘ng va chapdan 70 piksel, pastdan 50 piksel qilib o‘rnating:
p {
padding: 35px 70px 50px;
}
O‘zingiz sinab ko‘ring »
Misol
<p> elementi uchun ichki bo‘shliqni yuqoridan 35 piksel, o‘ngdan 70 piksel, pastdan 50 piksel va chapdan 90 piksel qilib o‘rnating:
p {
padding: 35px 70px 50px 90px;
}
O‘zingiz sinab ko‘ring »
Tegishli sahifalar
CSS darsligi: CSS padding
CSS darsligi: CSS quti modeli
HTML DOM ma’lumotnomasi: padding xususiyati
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!