Работа с отстъпи padding в CSS

Вече разгледахме свойството margin, което създава отстъп навън от границата. Съществува и много подобно свойство padding, което създава отстъп навътре от границата.

Сега нека да разгледаме с примери как работи това свойство. Първо ще покажа блок без отстъпи (текстът му е залепен към границите):

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

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

Результат:

А сега нека зададем padding от 30px за всички страни:

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

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

Результат: