CSS-свойство padding позволяет вам установить интервал между содержимым элемента и его границей border (или краем поля элемента, если у него нет определенной границы).

На padding влияет background-color. Например, если вы установите цвет фона для элемента, он будет виден через область заполнения padding.

Padding для отдельных сторон

Вы можете указать отступы для отдельных сторон используя CSS-свойства padding-top, padding-right, padding-bottom и padding-left соответственно. Давайте посмотрим пример, чтобы понять, как это работает:

h1 {
    padding-top: 50px;
    padding-bottom: 100px;
}
p {
    padding-left: 75px;
    padding-right: 75px;
}

Свойства padding могут быть указаны с использованием следующих значений:

  • length — значение указанное в px, em, rem, pt, cm и т.д.;
  • % — значение в процентах (%) от размера содержащего элемента;
  • inherit — указывает, что размер должен быть унаследован от родительского элемента.

В отличие от CSS-свойства margin, значение отступа не может быть отрицательным.

Сокращенное свойство padding

Свойство padding является кратким свойством, чтобы избежать установки отступов каждой стороны отдельно, то есть padding-top, padding-right, padding-bottom и padding-left.

Посмотрим на следующий пример, чтобы понять, как это работает:

h1 {
    padding: 50px; /* apply to all four sides */
}
p {
    padding: 25px 75px; /* vertical | horizontal */
}
div {
    padding: 25px 50px 75px; /* top | horizontal | bottom */
}
pre {
    padding: 25px 50px 75px 100px; /* top | right | bottom | left */
}

Эта сокращенная запись может принимать одно, два, три или четыре значения, разделенных пробелами.

  • Если указано одно значение, оно применяется ко всем четырем сторонам.
  • Если указаны два значения, первое значение применяется к верхней и нижней части, а второе значение применяется к правой и левой стороне элемента.
  • Если указано три значения, первое значение применяется к верхней, второе значение применяется к правой и левой стороне, а последнее значение применяется к нижней части.
  • Если указано четыре значения, они применяются соответственно к верхнему, правому, нижнему и левому краям поля элемента в указанном порядке.

Рекомендуется использовать сокращенные свойства, это поможет вам сэкономить время, избегая лишней типизации упростив отслеживание и поддержку вашего CSS-кода.

Влияние отступов и границ на макет

При создании разметки веб-страницы добавление отступа или границы к элементам иногда приводит к неожиданному результату, поскольку отступ и граница добавляются к ширине и высоте блока, сгенерированного элементом, как как это описано в руководстве по Блочной модели в CSS.

Например, если вы установите ширину элемента <div> равной 100% и также примените отступ или границу к нему, то появится горизонтальная полоса прокрутки. Давайте посмотрим на пример:

div {
    width: 100%;
    padding: 25px;
}

Чтобы предотвратить изменение ширины и высоты поля элемента и отступов, вы можете использовать CSS-свойство box-sizing. В следующем примере ширина и высота поля <div> останутся неизменными, однако область содержимого будет уменьшаться с увеличением отступа или границы.

div {
    width: 100%;
    padding: 25px;
    box-sizing: border-box;
}

Подробнее об особенностях определения CSS box sizing вы узнаете в следующих главах.

Похожие посты

Руководство по свойству opacity в CSS

CSS-свойство opacity означает непрозрачность и теперь является частью спецификаций CSS3. Старые браузеры имеют разные способы управления непрозрачностью. Opacity в Firefox, Safari, Chrome, Opera и IE9 Вот самый простой синтаксис для назначения непрозрачности CSS во всех современных браузерах. Приведенное выше правило сделает элемент абзаца непрозрачным на 70% (или прозрачным на 30%). Свойство opacity принимает значение от…

Руководство по таблицам в CSS

Таблицы обычно используются для отображения каких-либо упорядоченных табличных данных. После того, как вы создали HTML-таблицу, с помощью CSS вы можете значительно улучшить ее внешний вид. CSS предоставляет несколько свойств, которые позволяют вам управлять компоновкой и представлением элементов таблицы. В этом разделе вы увидите, как использовать CSS для стилизации таблиц. Добавление границ (border) в таблицы CSS-свойство…

Руководство по свойству margin в CSS

CSS-свойство margin позволяют вам установить интервал вокруг границы элемента (или края блока элемента, если у него нет определенной границы). На цвет элемента не влияет цвет фона background-color, он всегда прозрачен. Однако, если родительский элемент имеет цвет фона, он будет виден через область margin. Margin для отдельных сторон Вы можете установить margin для отдельных сторон используя…

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.