Padding va box-sizing
Padding va element kengligi
CSS width xossasi element kontent maydonining kengligini belgilaydi. Kontent maydoni — elementning padding, border va margin ichida joylashgan qismi (quti modeli).
Demak, agar elementning kengligi belgilangan bo‘lsa, unga qo‘shilgan padding elementning umumiy kengligiga qo‘shiladi. Bu ko‘pincha istalmagan natijaga olib keladi.
Misol
Bu yerda <div> elementiga 300px kenglik berilgan. Biroq <div> elementining haqiqiy kengligi 350px bo‘ladi (300px + 25px chap padding + 25px o‘ng padding):
div {
width: 300px;
padding: 25px;
}
O'zingiz sinab ko'ring »
Padding va box-sizing
box-sizing xossasi element kengligi va balandligi qanday hisoblanishini belgilaydi: ularga padding va chegaralar kiritilishi kerakmi yoki yo‘qmi.
box-sizing xossasi quyidagi qiymatlarga ega bo‘lishi mumkin:
content-box— Bu standart qiymat. width va height xossalari faqat kontentni o‘z ichiga oladi (border va padding kiritilmaydi)border-box— width va height xossalari kontent, padding va borderni o‘z ichiga oladi
Demak, padding qancha bo‘lishidan qat’i nazar, kenglikni 300px holatida saqlash uchun
box-sizing: border-box; ishlatishingiz mumkin. Bu element o‘zining haqiqiy kengligini saqlab qolishini ta’minlaydi; paddingni oshirsangiz, kontent uchun mavjud joy kamayadi.
Misol
Padding qancha bo‘lishidan qat’i nazar, kenglikni 300px holatida saqlash uchun box-sizing xossasidan foydalaning:
div {
width: 300px;
padding: 25px;
box-sizing: border-box;
}
O'zingiz sinab ko'ring »
Barcha CSS padding xossalari
| Xossa | Description |
|---|---|
| padding | Barcha padding xossalarini bitta deklaratsiyada belgilash uchun qisqartma xossa |
| padding-bottom | Elementning pastki paddingini belgilaydi |
| padding-left | Elementning chap paddingini belgilaydi |
| padding-right | Elementning o‘ng paddingini belgilaydi |
| padding-top | Elementning yuqori paddingini belgilaydi |
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!