Работа с отступами 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;
}

Результат: