CSS Padding

Padding elementning ichidagi kontent atrofida, belgilangan chegara ichida bo'sh joy yaratish uchun ishlatiladi.

Bu element 70px padding bilan belgilangan.

CSS padding xususiyatlari elementning ichidagi kontent atrofida, belgilangan chegara ichida bo'sh joy yaratish uchun ishlatiladi.

CSS bilan, siz paddinglarni to'liq nazorat qilishingiz mumkin. Elementning har bir tomoni uchun paddingni o'rnatish uchun xususiyatlar mavjud (yuqori, o'ng, pastki va chap).

Padding - Alohida Tomonlar

CSS elementning har bir tomoni uchun paddingni belgilash uchun xususiyatlarga ega:

padding-top
padding-right
padding-bottom
padding-left

Barcha padding xususiyatlari quyidagi qiymatlarga ega bo'lishi mumkin:

length - paddingni px, pt, sm va boshqa birliklarda belgilaydi
% - paddingni ota element kengligining foizida belgilaydi
inherit - padding ota elementdan meros qilib olinishi kerakligini belgilaydi

Eslatma

Manfiy qiymatlar qabul qilinmaydi.

Misol

<div> elementi uchun barcha to'rt tomon uchun har xil paddinglar o'rnatish:

div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

Padding - Qisqartma Xususiyat

Kodning qisqa bo'lishi uchun barcha padding xususiyatlarini bitta xususiyatda belgilash mumkin.

padding xususiyati quyidagi alohida padding xususiyatlari uchun qisqartma xususiyat hisoblanadi:

padding-top
padding-right
padding-bottom
padding-left

Bu qanday ishlaydi:

Agar padding xususiyati to'rt qiymatga ega bo'lsa:

padding: 25px 50px 75px 100px;

Yuqori padding 25px
O'ng padding 50px
Pastki padding 75px
Chap padding 100px

Misol

To'rt qiymatga ega qisqartma padding xususiyatidan foydalaning:

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

Agar padding xususiyati uch qiymatga ega bo'lsa:

padding: 25px 50px 75px;

Yuqori padding 25px
O'ng va chap paddinglar 50px
Pastki padding 75px

Misol

Uch qiymatli qisqartma padding xususiyatidan foydalaning:

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

Agar padding xususiyati ikki qiymatga ega bo'lsa:

padding: 25px 50px;

Yuqori va pastki paddinglar 25px
O'ng va chap paddinglar 50px

Misol

Bitta qiymatli qisqartma padding xususiyatidan foydalaning:

div {
  padding: 25px;
}

Padding va Element Kengligi

CSS width xususiyati elementning kontent maydoni kengligini belgilaydi. Kontent maydoni elementning padding, chegara va margin ichidagi qismdir (box model).

Shunday qilib, agar elementda belgilangan kenglik mavjud bo'lsa, bu elementga 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;
}

Kenglikni 300px da saqlash uchun, padding miqdori qanday bo'lishidan qat'i nazar, box-sizing xususiyatidan foydalanishingiz mumkin. Bu elementni haqiqiy kengligida saqlaydi; agar paddingni oshirsangiz, mavjud kontent joyi kamayadi.

Misol

Padding miqdori qanday bo'lishidan qat'i nazar, kenglikni 300px da saqlash uchun box-sizing xususiyatidan foydalaning:

div {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
}

Mashqlar Bilan O'zingizni Sinang

Mashq: <h1> elementining yuqori paddingini 30 pikseldan o'rnating.

<style>
  h1 {
    padding-top: 30px;
  }
</style>
 
<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph</p>
  <p>This is a paragraph</p>
</body>

Barcha CSS Padding Xususiyatlari

Xususiyat	Tavsif
`padding`	Bitta deklaratsiyada barcha padding xususiyatlarini o'rnatish uchun qisqartma xususiyati
`padding-bottom`	Elementning pastki paddingini o'rnatadi
`padding-left`	Elementning chap paddingini o'rnatadi
`padding-right`	Elementning o'ng paddingini o'rnatadi
`padding-top`	Elementning yuqori paddingini o'rnatadi

CSS Padding

Ushbu sahifada