Урок с практикой по CSS (Онлайн курсы)
Выбрать другой урок из курса
Обсуждение
Теория урока

Свойство padding для установки полей

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

Можно задавать одно, два, три или четыре значения для свойства padding:

Код CSS
div {
padding: 1px 2px 3px 4px;
padding: 1px 2px 3px;
padding: 1px 2px;
padding: 1px;
padding: auto;
/* и другие */
}

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

  • 1 значение - поле задается со всех сторон одинаково.
  • 2 значения - первое задает от верхнего и нижнего краёв, второе от левого и правого краёв.
  • 3 значения - первое от верхнего, второе от левого и правого, третье от нижнего краёв
  • 4 значения - задает от всех краёв в следующей последовательности: верх, право, низ, лево.

Так же существуют более конкретные аналоги: padding-top, padding-right, padding-bottom и padding-left. Например:

Код CSS
div {
padding-top: 20px; /* Поле сверху 20 пикселей */
}
div {
padding-left: 50%; /* Поле слева 50 процентов */
}
<
×
>
Не публикуйте свой код прямо в комментариях. Во-первых, он плохо отображается. Во-вторых, он может содержать для кого-то «спойлеры», т.е. ответы на практику. Воспользуйтесь специальными сервисами: cssdeck.com или jsfiddle.net.
Комментарии, содержащие код (пару строк не считается), будут безжалостно удаляться.