Работа с отступами padding на CSS

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

Давайте теперь посмотрим на примерах, как работает это свойство. Для начала приведу блок без отступов (у него текст прилип к границам):

<div id="elem"> какой-то текст... </div> #elem { width: 300px; border: 1px solid red; text-align: justify; }

:

А теперь зададим padding в 30px для всех сторон:

<div id="elem"> какой-то текст... </div> #elem { padding: 30px; width: 300px; border: 1px solid red; text-align: justify; }

:

Повторите страницу по данному образцу:

Повторите страницу по данному образцу: