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-top
padding-right
padding-bottom
padding-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 hisoblaydi
inherit - ota elementdagi qiymatni meros qilib oladi

Maslahat: Negativ qiymatlarga ruxsat beriladi

 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-top
padding-right
padding-bottom
padding-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 elementining chap tomoniga padding berish ko'rsatilgan.

O'ng tomonga padding berish Ushbu misolda elementining o'ng tomoniga padding berish ko'rsatilgan.

Tepa qismga padding berish Ushbu misolda elementining tepa qismiga padding berish ko'rsatilgan.

Pastki qismga padding berish Ushbu misolda elementining pastki kizmiga padding berish ko'rsatilgan.

CSSning barcha padding xususiyatlari

PreviousMargin collapse NextCSS Width/Height

Last updated 9 months ago