CSS Padding
Padding berilgan chegaraning ichqi qismidagi elementlar kontenti atrofida bo'sh joy hosil qilish uchun beriladi.
CSS Padding
CSSning padding xususiyati berilgan chegaraning ichqi qismidagi elementlar kontenti atrofida bo'sh joy hosil qilish uchun beriladi.
CSS yordamida paddingni boshqara olasiz. Elementning har bir tomoni (tepa, o'ng, pastki va chap) uchun alohida padding berish xususiyatlari mavjud.
Padding - Alohida tomonlar
CSS elementning har bir tomoniga padding berish uchun bir nechta xususiyatlarga ega
padding-toppadding-rightpadding-bottompadding-left
Barcha padding xususiyatlari quyidagi qiymatlarni o'z ichiga oladi:
length- padding qiymatlari px, pt, cm, va hokazolar asosida belgilanadi%- padding qiymatlarini o'z ichiga olgan elementlarning kengligini % da hisoblaydiinherit- ota elementdagi qiymatni meros qilib oladi
Maslahat: Negativ qiymatlarga ruxsat beriladi
<p> elementning barcha tomonlari uchun turli xil padding berish:
p {
padding-top: 100px;
padding-bottom: 100px;
padding-right: 150px;
padding-left: 80px;
}Padding qisqartmasi
Paddingning barcha xususiyatlarini bitta xususiyat ichida bir qatorda yozish mumkin.
padding xususiyati quyidagi padding xususiyatlarini qisqartirib bera oladi:
padding-toppadding-rightpadding-bottompadding-left
Ular mana bunday ishlaydi:
Agarda padding xususiyatida 4 ta qiymat bo'lsa:
padding: 25px 50px 75px 100px;
tepa qism paddinggi 25px
o'ng tomon paddinggi 50px
pastki qism paddinggi 75px
chap tomon paddinggi 100px
paddingni 4 ta qiymat bilan birga ishlatish:
p {
padding: 25px 50px 75px 100px;
}Agar padding xususiyatida 3 ta qiymat bo'lsa:
padding: 25px 50px 75px;
tepa qism paddinggi 25px
o'ng va chap tomon paddinggi 50px
pastki qism paddinggi 75px
padding ni 3 ta qiymat bilan birga ishlatish:
p {
padding: 25px 50px 75px;
}Agar padding xususiyatida 2 ta qiymat bo'lsa:
padding: 25px 50px;
tepa va past ki qsi paddinggi 25px
o'ng va chap tomon paddinggi 50px
paddingni 2 ta qiymat bilan birga ishlatish:
p {
padding: 25px 50px;
}Agar padding xususiyatida bitta qiymat bo'lsa:
padding: 25px;
barcha tomonlardagi padding 25px
padding qisqartmasini 1 ta qiymat bilan ishlatish:
p {
padding: 25px;
}Padding va element kengligi
CSSning width xususiyati elementning kontent maydonining kengligini belgilaydi. Kontent maydoni - bu elementning padding, border va margin ichidagi qism (quti modeli).
Agar element ma'lum bir kenglikka ega bo'lsa, ushbu elementga qo'shilgan padding elementning umumiy kengligiga qo'shiladi. Bu ko'pincha istalmagan natijani keltirib chiqaradi.
Bu yerda <div> elementga 300px width berilgan. Lekinelementning haqiqiy kengligi 350px (300px+25px chapki padding + 25px o'ng padding) bo'ladi.
div {
width: 300px;
padding: 25px;
}Padding qancha qo'shilishidan qatiy nazar widthni 300px holatida ushlab turish uchun box-sizing xususiyatidan foydalanish kerak. Bu elementning haqiqiy kengligini saqlab qoladi; Agar paddingni ko'paytirsangiz, element ichidagi kontentning joyi kamayadi.
Padding qancha qo'shilishidan qatiy nazar widthni 300px holatida ushlab turish uchun box-sizing xususiyatidan foydalanish
div {
width: 300px;
padding: 25px;
box-sizing: border-box;
}Ko'proq misollar
Chap tomonga padding berish Ushbu misolda <p> elementining chap tomoniga padding berish ko'rsatilgan.
O'ng tomonga padding berish Ushbu misolda <p> elementining o'ng tomoniga padding berish ko'rsatilgan.
Tepa qismga padding berish Ushbu misolda <p> elementining tepa qismiga padding berish ko'rsatilgan.
Pastki qismga padding berish Ushbu misolda <p> elementining pastki kizmiga padding berish ko'rsatilgan.
CSSning barcha padding xususiyatlari
padding
paddingning barcha xususiyatlarini bir qatorga yozishga imkon beradi
Elementning pastki qismiga padding beradi
Elementning chap tomoniga padding beradi
Elementning o'ng tomoniga padding beradi
Elementning tepa qismiga padding beradi
Last updated