Посмотреть все уроки курса
Выбрать другой урок из курса
Поиск по сайту
Теория урока

2.1. Свойство 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?

Извините за это всплывающее окно, меня они тоже раздражают.

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

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

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

Закрыть окно