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

149. Свойство 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 процентов */
}

Похожие уроки и записи блога

Свойство margin для установки отступовОтступы, рамки, поля
Свойство background для работы с фономЦвета и фон
Свойство z-index для определения уровня элементаПозиционирование
Знакомимся с Flexbox в CSSЗнакомство с Flexbox
Свойство border для создания границОтступы, рамки, поля
Структуры данных в PythonЗнакомство с Python
Добавляем градиент к фону элементаЦвета и фон
Первое знакомство с PythonЗнакомство с Python
Внутреннее устройство и сортировка словаря в PythonЗнакомство с Python
<
×
>
Впервые на сайте Codebra?

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

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

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

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

Закрыть окно