Урок с практикой по 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 процентов */
}
<
×
>
Внимание! Впервые на этом сайте?

Образовательный ресурс codebra.ru полностью посвящен программированию. Все курсы и уроки находятся на главной странице. Вы можете начать изучение прямо сейчас, кликнув на ссылки: HTML, CSS, JavaScript, C++, PHP, jQuery, Python, Bootstrap 3

Если что-то не нашли, то воспользуйтесь поиском по сайту, который находится на главной странице в самом верху.

Удачи в обучении!

Закрыть окно