CSS padding
CSS ichki chekinish (padding)
CSS padding xossalari element kontenti atrofida, belgilangan chegaralar ichida bo‘shliq yaratish uchun ishlatiladi.
CSS bilan padding ustidan to‘liq nazoratga egasiz. Elementning har bir tomoni (top, right, bottom va left) uchun padding belgilovchi xossalar va barcha padding xossalarini bitta deklaratsiyada belgilovchi qisqartma xossa mavjud.
O‘zingiz sinab ko‘ring »
Padding — alohida tomonlar
CSS’da elementning har bir tomoni uchun padding belgilovchi xossalar mavjud:
padding-top— elementning yuqori padding‘ini belgilaydipadding-right— elementning o‘ng padding‘ini belgilaydipadding-bottom— elementning pastki padding‘ini belgilaydipadding-left— elementning chap padding‘ini belgilaydi
Barcha padding xossalari quyidagi qiymatlarga ega bo‘lishi mumkin:
- length — px, pt, cm va h.k. da padding belgilaydi
- % — o‘z ichiga oluvchi element kengligining foizida padding belgilaydi
- inherit — padding ota elementdan meros qilib olinishi kerakligini belgilaydi
Eslatma: Manfiy qiymatlarga ruxsat berilmaydi.
Misol
<div> elementining to‘rt tomoni uchun turli padding qiymatlarini belgilash:
div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
O‘zingiz sinab ko‘ring »
Padding — qisqartma xossasi
Kodni qisqartirish uchun barcha padding xossalarini bitta deklaratsiyada belgilash mumkin.
padding xossasi quyidagi alohida padding xossalari uchun qisqartma xossadir:
Bu qanday ishlaydi:
Agar padding xossasi to‘rtta qiymatga ega bo‘lsa:
- padding: 25px 50px 75px 100px;
- yuqori padding — 25px
- o‘ng padding — 50px
- pastki padding — 75px
- chap padding — 100px
Misol
padding qisqartma xossasidan to‘rtta qiymat bilan foydalanish:
div {
padding: 25px 50px 75px 100px;
}
O‘zingiz sinab ko‘ring »
Agar padding xossasi uchta qiymatga ega bo‘lsa:
- padding: 25px 50px 75px;
- yuqori padding — 25px
- o‘ng va chap padding‘lar 50px
- pastki padding — 75px
Misol
padding qisqartma xossasidan uchta qiymat bilan foydalanish:
div {
padding: 25px 50px 75px;
}
O‘zingiz sinab ko‘ring »
Agar padding xossasi ikkita qiymatga ega bo‘lsa:
- padding: 25px 50px;
- yuqori va pastki padding‘lar 25px
- o‘ng va chap padding‘lar 50px
Misol
padding qisqartma xossasidan ikkita qiymat bilan foydalanish:
div {
padding: 25px 50px;
}
O‘zingiz sinab ko‘ring »
Agar padding xossasi bitta qiymatga ega bo‘lsa:
- padding: 25px;
- to‘rtala padding ham 25px
Misol
padding qisqartma xossasidan bitta qiymat bilan foydalanish:
div {
padding: 25px;
}
O‘zingiz sinab ko‘ring »
Ko‘proq misollar
Chap padding xossasini belgilash
Ushbu misol <p> elementining chap ichki bo‘shlig‘ini (padding) qanday belgilashni ko‘rsatadi.
O‘ng padding xossasini belgilash
Ushbu misol <p> elementining o‘ng ichki bo‘shlig‘ini (padding) qanday belgilashni ko‘rsatadi.
Yuqori padding xossasini belgilash
Ushbu misol <p> elementining yuqori ichki bo‘shlig‘ini (padding) qanday belgilashni ko‘rsatadi.
Pastki padding xossasini belgilash
Ushbu misol <p> elementining pastki ichki bo‘shlig‘ini (padding) qanday belgilashni ko‘rsatadi.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!