თვისება padding

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

სინტაქსი

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

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

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

მაგალითი

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

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

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

Результат:

მაგალითი

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

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

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

Результат:

მაგალითი

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

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

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

Результат:

მაგალითი

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

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

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

Результат:

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