Отступ

Базовая линия Широко доступна

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с июля 2015 года.

Свойство padding CSS сокращенное свойство устанавливает отступ для всех четырех сторон элемента одновременно.

Попробуйте

Отступ элемента — это пространство между его содержимым и его границей.

Примечание: Отступ создаёт дополнительное пространство внутри элемента. В отличие от margin, он создаёт дополнительное пространство вокруг элемента.

Составные свойства

Это сокращение для следующих свойств CSS:

Синтаксис

/* Apply to all four sides */
padding: 1em;

/* top and bottom | left and right */
padding: 5% 10%;

/* top | left and right | bottom */
padding: 1em 2em 2em;

/* top | right | bottom | left */
padding: 5px 1em 0 2em;

/* Global values */
padding: inherit;
padding: initial;
padding: revert;
padding: revert-layer;
padding: unset;

Свойство padding можно задать с одним, двумя, тремя или четырьмя значениями. Каждое значение — это <length> или <percentage>. Отрицательные значения недопустимы.

При указании одного значения, отступ применяется ко всем четырём сторонам.
При указании двух значений, первое значение задаёт отступ для верхней и нижней сторон, второе — для левой и правой.
При указании трёх значений, первое значение задаёт отступ для верхней стороны, второе — для левой и правой сторон, третье — для нижней стороны.
При указании четырёх значений, отступы применяются к верхней, правой, нижней и левой сторонам в этом порядке (по часовой стрелке).

Значения

<length>: Размер отступа в виде фиксированного значения.
<percentage>: Размер отступа в процентах, относительно размера строки (ширина в горизонтальном языке, определённого writing-mode) содержащего блока.

Формальное определение

Начальное значение	как каждое из свойств сокращенного: `padding-bottom`: `0` `padding-left`: `0` `padding-right`: `0` `padding-top`: `0`
Применяется к	всем элементам, кроме `table-row-group`, `table-header-group`, `table-footer-group`, `table-row`, `table-column-group` и `table-column`. Также применяется к `::first-letter` и `::first-line`.
Наследуется	нет
Проценты	относятся к ширине содержащего блока
Вычисленное значение	как каждое из свойств сокращенного: `padding-bottom`: заданный процент или абсолютная длина `padding-left`: заданный процент или абсолютная длина `padding-right`: заданный процент или абсолютная длина `padding-top`: заданный процент или абсолютная длина
Тип анимации	длина

Формальный синтаксис

padding = 
  <'padding-top'>{1,4}  

<padding-top> = 
  <length-percentage [0,∞]>  

<length-percentage> = 
  <length>      |
  <percentage>

Примеры

Установка отступа в пикселях

HTML

<h4>This element has moderate padding.</h4>
<h3>The padding is huge in this element!</h3>

CSS

h4 {
  background-color: lime;
  padding: 20px 50px;
}

h3 {
  background-color: cyan;
  padding: 110px 50px 50px 110px;
}

Результат

Установка отступа в пикселях и процентах

padding: 5%; /* All sides: 5% padding */

padding: 10px; /* All sides: 10px padding */

padding: 10px 20px; /* top and bottom: 10px padding */
/* left and right: 20px padding */

padding: 10px 3% 20px; /* top:            10px padding */
/* left and right: 3% padding   */
/* bottom:         20px padding */

padding: 1em 3px 30px 5px; /* top:    1em padding  */
/* right:  3px padding  */
/* bottom: 30px padding */
/* left:   5px padding  */

Спецификации

Спецификация
CSS Box Model Module Level 3 # padding-shorthand

Совместимость с браузерами

	Рабочие столы					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`padding`	1	12	1	3.5	1	18	4	14	1	1.0	4.4

См. также

padding-top, padding-right, padding-bottom, и padding-left
padding-block-start, padding-block-end, padding-inline-start, и padding-inline-end
padding-block и padding-inline сокращения
Введение в базовые модели CSS
CSS box model модуль

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/padding