Название

Свойство CSS padding.

Исходя из изображения, по которому формируются размеры блоков на веб-странице, между областью с содержимым (content) и границей border, находится область, которая называется padding.

В этой статье, я хочу рассказать о том, что это такое и как это работает.

boxdim

С англ. языка padding - это материал, которым набивают подушки. На самом деле, смысл в этом есть.

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

Давайте возьмем, для примера, блок с абзацем, у которого установлена видимая граница border и попробуем применить к нему свойство padding.

<p style="border:1px solid #000; padding:30px;">Пример абзаца с padding</p>

Свойство padding образовало внутренний отступ от границы абзаца, до его содержимого.

Свойство padding также можно задавать для всех 4 сторон, которые окружают содержимое блока.

Т.е. вы можете через тире добавить название той стороны, для которой нужно будет сделать отступ.

К примеру, давайте добавим внутренний отступ только для верхней стороны абзаца.

<p style="border:1px solid #000; padding-top:30px;">Пример абзаца с padding</p>

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

Назад Далее