Свойство 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;
}

Результат:

Вижте също