CSS Padding

Padding berilgan chegaraning ichqi qismidagi elementlar kontenti atrofida bo'sh joy hosil qilish uchun beriladi.

W3Schools online HTML editor

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

CSS

<p> elementning barcha tomonlari uchun turli xil padding berish:

p {
  padding-top: 100px;
  padding-bottom: 100px;
  padding-right: 150px;
  padding-left: 80px;
}

W3Schools online HTML editor

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

CSS

paddingni 4 ta qiymat bilan birga ishlatish:

p {
  padding: 25px 50px 75px 100px;
}

W3Schools online HTML editor

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

CSS

padding ni 3 ta qiymat bilan birga ishlatish:

p {
  padding: 25px 50px 75px;
}

W3Schools online HTML editor

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

CSS

paddingni 2 ta qiymat bilan birga ishlatish:

p {
  padding: 25px 50px;
}

W3Schools online HTML editor

Agar padding xususiyatida bitta qiymat bo'lsa:

• padding: 25px;

  • barcha tomonlardagi padding 25px

CSS

padding qisqartmasini 1 ta qiymat bilan ishlatish:

p {
  padding: 25px;
}

W3Schools online HTML editor

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.

CSS

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;
}

W3Schools online HTML editor

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.

CSS

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;
}

W3Schools online HTML editor

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

Xususiyat	Ta'rif
padding	paddingning barcha xususiyatlarini bir qatorga yozishga imkon beradi
padding-bottom	Elementning pastki qismiga padding beradi
padding-left	Elementning chap tomoniga padding beradi
padding-right	Elementning o'ng tomoniga padding beradi
padding-top	Elementning tepa qismiga padding beradi