CSS Padding

CSS Padding


CSS padding xususiyatlari

CSS padding xususiyatlari kontent bo'ylab bo'sh joyni umumlashtirishda ishlatiladi.
Margin xususiyatlari element kontenti va chegarasi o'rtasidagi oq bo'sh joy hajmini o'rnatish.
Bu elementni paddingi 50px(piksel).


CSS padding

CSS padding xususiyatlari element kontenti va chegarasi orasidagi oq bo'sh joy hajmini belgilaydi.
Padding element kontenti(chegara ichidagi) atrofidagi joyni bo'shatadi.

...Padding elementning orqa fon rangi tomonidan ta'sir etiladi!

CSS bilan, siz paddingni to'liq ravishda nazorat qilishingiz mumkin. Bu yerda elementning har bir tarafi(yuqori, o'ng, past, va chap)ga padding o'rnatish uchun CSS xususiyatlari


Padding - Alohida tomonlar

CSS bir elementning har tomoniga padding joylashtirish uchun xususiyatlarga ega:

padding-top(yuqori)
padding-right(o'ng)
padding-bottom(tub)
padding-left(chap)

Hamma padding xususiyatlari quyidagi qiymatlarga ega bo'lishi mumkin:


length(uzunlik) - px, pt, cm va boshqalardagi paddingni bildiradi.
% - elementning kengligini % (foiz)idagi paddingni bildiradi.
inherit(meros) - paddingni ota elementdan ko'rinishi bir hil bo'lib qolganligini bildiradi

Quyidagi misol <p> elementning to'rt tomoni uchun turli hil paddinglarni o'rnatadi.


Namuna:

O'zingni Sinab Ko'r
p {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}

Padding - Qisqacha(oson) xususiyati

Kodni kamaytirish uchun hamma padding xususiyatlarini bitta qilib olish mumkin.

padding quyidagi alohida padding xususiyatlari uchun qisqacha xususiyat hisoblanadi:

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


Namuna:

O'zingni Sinab Ko'r
p {
padding: 50px 30px 50px 80px;
}

Bu yerda qanday uni ishlashi

Agar padding xususiyatini 4ta qiymati bo'lsa:

padding: 25px 50px 75px 100px;

yuqoridagi padding - 25px
o'ngdagi padding - 50px
pastdagi padding - 75px
chapdagi padding - 100px

Agar padding xususiyatini 3ta qiymati bo'lsa:

padding: 25px 50px 75px;

yuqoridagi padding - 25px
o'ngdagi va chapdagi paddinglar - 50px
pastdagi margin - 75px

Agar padding xususiyatini 2ta qiymati bo'lsa:

padding: 25px 50px;

yuqoridagi va quyidagi padding - 25px
o'ngdagi va chapdagi padding - 50px

Agar padding xususiyatini 1ta qiymati bo'lsa:

padding: 25px;

to'rttala paddinglar - 25px


Namuna:

O'zingni Sinab Ko'r
div.ex1 {
    padding: 25px 50px 75px 100px;
}

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

div.ex3 {
    padding: 25px 50px;
}

div.ex4 {
    padding: 25px;
}

Xususiyati Tavsif
padding Padding xususiyatlarini umumiylashtirish uchun bir qisqa xususiyat
padding-bottom Elementning quyi 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

Innovative Lab web sahifasiga xush kelibsiz biz bilan birga IT sohasidagi o'z bilimlaringizni bosqichma-bosqich oshirib boring!


Telegram kanalimizdan kunlik darslarni o'rganing  

TOSHKENT SHAHRIDAGI INHA UNIVERSITETI - 2017