Свойство 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,
което задава външен отстъп