CSS свойство padding

❮ Назад Вперед ❯

Свойство padding задает отступы со всех сторон контента элемента.

Значения свойства устанавливаются с помощью единиц измерения длины или процентов.

Отрицательные значения недопустимы.

CSS padding — это сокращенная форма записи для следующих свойств:

  • padding-top
  • padding-bottom
  • padding-left
  • padding-right

Можно использовать padding для всех сторон:

Свойство padding может быть указано, используя одно, две, три или четыре значения:

  • Если указаны четыре значения, первое устанавливает верхнюю сторону, второе — правую, третье — нижнюю, и четвертое — левую сторону.
  • Если указаны три значения, первое устанавливает верхнюю сторону, второе — правую и левую, а третье — нижнюю сторону.
  • Если указаны две значения, первое устанавливает верхнюю и нижнюю, а второе правую и левую сторону.
  • Если указано одно значение, оно применяется для четырех сторон.
padding: length | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      p {
      background-color: #1c87c9;
      color: #fff;
      padding: 20px 40px 20px 40px;
      }
    </style>
  </head>
  <body>
    <h3>Пример свойства padding</h3>
    <p>Параграф с применением свойств background-color, color и padding.</p>
  </body>
</html>

Попробуйте сами!

Код в вышеприведенном примере означает, что отступ сверху должен быть 20px, справа — 40px, снизу — 20px, а слева — 40px.

Рассмотрим другой пример, где отступ указан в процентах:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      p {
      background-color: #1c87c9;
      color: #fff;
      padding: 5% 10% 10% 5%;
      }
    </style>
  </head>
  <body>
    <h3>Пример свойства padding</h3>
    <p>Параграф с применением свойств background-color, color и padding.
 
 </p>
  </body>
</html>

Попробуйте сами!

Пример, где указаны две значения. Первое устанавливает верхнюю и нижнюю сторону, а второе — правую и левую:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      p {
      background-color: #1c87c9;
      color: #fff;
      padding: 20px 40px;
      }
    </style>
  </head>
  <body>
    <h3>Пример свойства padding</h3>
    <p>Параграф с применением свойств background-color, color и padding.</p>
  </body>
</html>

Попробуйте сами!

Свойство padding | CSS справочник

CSS свойства

Определение и применение

CSS свойство padding устанавливает величину внутренних отступов элемента в одном объявлении.

CSS свойство padding объединяет в себе такие свойства как padding-top, padding-right, padding-bottom и padding-left. Это свойство может иметь от одного до четырех значений.

На изображении светло-серым цветом обозначена зона за которую отвечает свойство padding:

  1. При указании четырёх значений
    (5px 10px 15px 20px) — порядок расстановки внутренних отступов будет следующий: Top(5px) — Right(10px) — Bottom(15px) — Left(20px). Для запоминания порядка расстановки внутренних отступов в одном объявлении можно использовать английское слово TRouBLe(где T — top, R — right, B — bottom, L — left).

  2. При указании трёх значений (5px 10px 15px) — порядок расстановки внутренних отступов будет следующий: Top (5px) — Right & Left (10px) — Bottom (15px).

  3. При указании двух значений (5px 10px) — первое значение(5px) будет задавать размер внутреннего отступа от верха и от низа содержимого элемента, второе (10px) значение — внутренние отступы слева и справа содержимого элемента.

  4. При указании одного значения (5px) — внутренний отступ со всех сторон будет одного размера — 5px.

Поддержка браузерами

Свойство
Chrome
Firefox
Opera
Safari
IExplorer
Edge
padding1.01.03.51.04.012.0

CSS синтаксис:

padding:"length | initial | inherit";

JavaScript синтаксис:

object.style.padding = "5px"

Значения свойства

ЗначениеОписание
lengthОпределяет внутренний отступ элемента в пикселях, см и др. единицах. Значение по умолчанию 0.
Отрицательные значения не допускаются.
%Определяет внутренний отступ элемента в процентах от содержащего блока родительского элемента.
Отрицательные значения не допускаются.
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS1

Наследуется

Нет.

Анимируемое

Да.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title>Отступы элемента.</title>
<style> 
.primer {
width  : 33%; /* задаём ширину блока */
background-color : orange; /* задаём цвет заднего фона */
padding : 15px 100px 5px; /* Порядок расстановки внутренних отступов будет следующий: Top (15px) - Right & Left (100px) - Bottom (5px). */
}
.primer1 {
width  : 33%; /* задаём ширину блока */
background-color : yellow; /* задаём цвет заднего фона */
padding : 25px; /* величина внутреннего отступа со всех сторон будет одного размера - 25px. */
border : 1px solid; /* задаём сплошную границу для всех сторон элемента */
}

 
.primer2 {
width  : 33%; /* задаём ширину блока */
background-color : lime; /* задаём цвет заднего фона */
padding : 25px 75px; /* певое значение(25px) будет задавать размер внутреннего отступа от верха и от низа содержимого элемента, второе (75px) значение - внутренние отступы слева и справа содержимого элемента.   */
border : 1px solid; /* задаём сплошную границу для всех сторон элемента */
}
.primer3 {
width  : 33%; /* задаём ширину блока */
background-color : blue; /* задаём цвет заднего фона */
padding : 40px 25px 25px 100px; /* порядок расстановки внутренних отступов будет следующий: 
 
Top(40px) - Right(25px) - Bottom(25px) - Left(100px). */
border : 1px solid; /* задаём сплошную границу для всех сторон элемента */
}
</style>
</head>
	<body>
		<div class = "primer">Съешь же ещё этих мягких французских булок да выпей чаю.</div>
		<div class = "primer1">Съешь же ещё этих мягких французских булок да выпей чаю.</div>
		<div class = "primer2">Съешь же ещё этих мягких французских булок да выпей чаю.</div>
		<div class = "primer3">Съешь же ещё этих мягких французских булок да выпей чаю.</div>
	</body>
</html>
Пример использования внутренних отступов элемента.CSS свойства

padding-right — CSS: каскадные таблицы стилей

CSS-свойство padding-right устанавливает ширину области заполнения справа от элемента.

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

Примечание: Свойство padding можно использовать для установки отступов со всех четырех сторон элемента с помощью одного объявления.

 /* <длина> значений */
отступ-справа: 0.5em;
заполнение справа: 0;
обивка справа: 2 см;
/* <процентное> значение */
заполнение справа: 10%;
/* Глобальные значения */
padding-right: наследовать;
padding-right: начальный;
padding-right: вернуться;
padding-right: обратный слой;
заполнение справа: не установлено;

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

Значения

<длина>

Размер отступа как фиксированное значение. Должен быть неотрицательным.

<процент>

Размер заполнения в процентах относительно встроенного размера ( ширина на горизонтальном языке, определяемом режимом письма

) содержащего блока. Должен быть неотрицательным.

Исходное значение 0
Применяется ко всем элементам, кроме table-row-group , 9 0004 table-header-group , table-footer-group , table -строка , таблица-столбец-группа и таблица-столбец . Это также относится к ::first-letter и :: первая строка .
Унаследовано нет
Проценты относятся к ширине содержащего блока
Вычисленное значение указанный процент или абсолютная длина
Тип анимации длина
 padding-right = 
 <процент длины [0,∞]> 
 "><процент длины> = 
 <длина> |

Установка заполнения справа с использованием пикселей и процентов 

 . content {
  заполнение справа: 5%;
}
.сайдбокс {
  отступ справа: 10px;
}
Спецификация
Модуль CSS Box Model Level 3
# padding-physical
Таблицы

BCD загружаются только в браузере с включенным JavaScript. Включите JavaScript для просмотра данных.

  • Введение в базовую блочную модель CSS
  • padding-top , padding-bottom , padding-left и padding сокращение
  • Сопоставленные логические свойства: padding-block-start , padding-block-end , padding-inline-start и padding-inline-end и сокращения padding-block и обивка- встроенный

Обнаружили проблему с содержанием этой страницы?

  • Отредактируйте страницу на GitHub.
  • Сообщить о проблеме с содержимым.
  • Просмотрите исходный код на GitHub.

Хотите принять участие?

Узнайте, как внести свой вклад.

Последний раз эта страница была изменена участниками MDN.

padding-left — CSS: каскадные таблицы стилей

Свойство CSS padding-left устанавливает ширину области заполнения слева от элемента.

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

Примечание: Свойство padding можно использовать для установки отступов со всех четырех сторон элемента с помощью одного объявления.

 /* <длина> значений */
отступ слева: 0.5em;
отступ слева: 0;
обивка слева: 2 см;
/* <процентное> значение */
отступ слева: 10%;
/* Глобальные значения */
padding-left: наследовать;
padding-left: начальный;
padding-left: вернуться;
padding-left: возвратный слой;
отступ слева: не установлен;

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

Значения

<длина>

Размер отступа как фиксированное значение. Должен быть неотрицательным.

<процент>

Размер заполнения в процентах относительно встроенного размера ( ширина в горизонтальном языке, определяемый режимом письма ) содержащего блока. Должен быть неотрицательным.

Исходное значение 0
Применяется ко всем элементам, кроме table-row-group , table-header-group , table-footer-group 90 005, таблица-строка , таблица- столбец-группа и таблица-столбец . Это также относится к ::first-letter и ::first-line .
Унаследовано нет
Проценты относятся к ширине содержащего блока 9- слева =
<процент длины [0,∞]>

">< length-percentage> =
|

Установка заполнения слева с использованием пикселей и процентов 

 . content {
  отступ слева: 5%;
}
.сайдбокс {
  отступ слева: 10px;
}
Спецификация
Модуль CSS Box Model Level 3
# padding-physical
9 0002 Таблицы BCD загружаются только в браузере с включенным JavaScript. Включите JavaScript для просмотра данных.

  • Знакомство с базовой блочной моделью CSS
  • padding-top , padding-right , padding-bottom и padding сокращение
  • Сопоставленные логические свойства: padding-block-start , padding-block-end , padding-inline-start и padding-inline-end и сокращенные обозначения padding-block и padding-inline 90 136

Обнаружили проблему с содержанием этой страницы?