თვისება padding

თვისება padding ადგენს ელემენტის შიდა ველს. თვისების მნიშვნელობა შეიძლება იყოს ნებისმიერი ზომის ერთეული. ნაგულისხმევად, ყველა ბრაუზერს შეუძლია ელემენტებს სხვადასხვა ველების დამატება. თვისება არის შემოკლება შემდეგი თვისებებისთვის: padding-top, padding-right, padding-bottom, padding-left.

სინტაქსი

სელექტორი {
	padding: მნიშვნელობა;
}

პარამეტრების რაოდენობა

თვისება padding იღებს 1, 2, 3 ან 4 მნიშვნელობას, რომლებიც ჩამოთვლილია სივრცით გამოყოფით:

რაოდენობა	აღწერა
`1`	ერთი მნიშვნელობა ადგენს ველს ელემენტის ყველა მხრიდან.
`2`	პირველი მნიშვნელობა ადგენს ველს ზემოდან და ქვემოდან, ხოლო მეორე - მარჯვნიდან და მარცხნიდან.
`3`	პირველი მნიშვნელობა ადგენს ველს ზემოდან, მეორე - მარჯვნიდან და მარცხნიდან, ხოლო მესამე - ქვემოდან.
`4`	პირველი მნიშვნელობა ადგენს ველს ზემოდან, მეორე - მარჯვნიდან, მესამე - ქვემოდან, ხოლო მეოთხე - მარცხნიდან.

მაგალითი

ამ შემთხვევაში, ნაგულისხმევად, შიდა ველი იქნება ნულოვანი და ტექსტი მიბმული იქნება ბლოკის საზღვართან:

<div id="elem">
	some long text
</div>

#elem {
	padding: 0;
	width: 300px;
	border: 1px solid black;
	text-align: justify;
}

მაგალითი

ახლა კი შევქმნათ შიდა ველი 30px-ზე:

<div id="elem">
	some long text
</div>

#elem {
	padding: 30px;
	width: 300px;
	border: 1px solid black;
	text-align: justify;
}

მაგალითი

ახლა ველი ზემოდან და ქვემოდან იქნება 20px, ხოლო მარჯვნიდან და მარცხნიდან - 5px:

<div id="elem">
	some long text
</div>

#elem {
	padding: 20px 5px;
	width: 300px;
	border: 1px solid black;
	text-align: justify;
}

მაგალითი

ახლა ველი ზემოდან არის 5px, მარჯვნიდან - 15px, ქვემოდან - 25px, მარცხნიდან - 35px:

<div id="elem">
	some long text
</div>

#elem {
	padding: 5px 15px 25px 35px;
	width: 300px;
	border: 1px solid black;
	text-align: justify;
}

იხილეთ აგრეთვე

თვისება margin,
რომელიც ადგენს გარე ველს