CSS свойство padding

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

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.

Проценты всех четырёх внутренних отступов вычисляются относительно строчного размера содержащего блока — обычно его ширины, даже для верхнего и нижнего отступов. Отрицательные значения запрещены.

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

Попробуйте значения padding

<div class="stage">
  <div class="demo-target">
    <div class="content">Текст</div>
  </div>
</div>

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 300px;
  padding: 12px;
  border: 2px dashed #607589;
  background: #edf2f5;
  font: 16px/1.4 system-ui;
  color: #172c3d;
}
.demo-target {
  background: #ffe4bd;
  border: 3px solid #245a85;
  width: fit-content;
  padding: 0;
}
.content {
  padding: 6px;
  background: #245a85;
  color: white;
}

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 300px;
  padding: 12px;
  border: 2px dashed #607589;
  background: #edf2f5;
  font: 16px/1.4 system-ui;
  color: #172c3d;
}
.demo-target {
  background: #ffe4bd;
  border: 3px solid #245a85;
  width: fit-content;
  padding: 12px;
}
.content {
  padding: 6px;
  background: #245a85;
  color: white;
}

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 300px;
  padding: 12px;
  border: 2px dashed #607589;
  background: #edf2f5;
  font: 16px/1.4 system-ui;
  color: #172c3d;
}
.demo-target {
  background: #ffe4bd;
  border: 3px solid #245a85;
  width: fit-content;
  padding: 24px;
}
.content {
  padding: 6px;
  background: #245a85;
  color: white;
}

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

Спецификация: CSS box

✓Поддерживается во всех основных браузерах с 2015 года.

Показать браузеры

ВсеКомпьютерыМобильные

Совместимостьcss.properties.padding

Возможность	Компьютеры					Мобильные
	ChromeChrome	EdgeEdge	FirefoxFirefox	OperaOpera	SafariSafari	Chrome AndroidChromeAndroid	Firefox for AndroidFirefoxAndroid	Opera AndroidOperaAndroid	Safari on iOSSafariiOS	Samsung BrowserSamsungAndroid	WebView AndroidWebViewAndroid	WebView on iOSWebViewiOS
padding	✓1	✓12	✓1	✓3.5	✓1	✓18	✓4	✓14	✓1	✓1.0	✓4.4	✓1

✓поддерживается◐с ограниченияминет поддержки?нет данных≤31 — не позднее версии 31

CSS синтаксис:

padding: <'padding-top'>{1,4};

/* Глобальные значения */
padding: initial | inherit | unset | revert | revert-layer;

{1,4} — число повторений от 1 до 4.

JavaScript синтаксис:

element.style.padding = "5px";

Начальное значение свойства

• padding-bottom — 0;
• padding-left — 0;
• padding-right — 0;
• padding-top — 0.

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

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

CSS Box Model — спецификация padding.

Наследуется

Нет.

Анимируемое

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

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

Внутренние отступы по четырём сторонам

Белая область показывает содержимое, голубая — внутренние отступы. В A они отсутствуют, в B заданы сверху, справа, снизу и слева: 8px 16px 24px 32px. Попробуйте два значения: 12px 24px — для верха и низа, затем боковых сторон.

base.css

CSS

* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.4 system-ui,
        sans-serif;
    color: #172c3d;
}
.comparison {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: 24px;
    align-items: start;
}
section {
    min-width: 0;
}
h3 {
    margin: 0 0 12px;
    font-size: 16px;
}
.sample {
    border: 2px solid #35658a;
    background: #c5dbea;
}
.content {
    background: #fff;
    color: #172c3d;
    min-height: 60px;
    overflow-wrap: anywhere;
}

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Внутренние отступы по четырём сторонам</title>
  </head>
  <body>
    <div class="comparison">
      <section>
        <h3>Вариант A</h3>
        <div class="sample first"><div class="content">Содержимое блока</div></div>
      </section>
      <section>
        <h3>Вариант B</h3>
        <div class="sample second"><div class="content">Содержимое блока</div></div>
      </section>
    </div>
  </body>
</html>

style.css

CSS

.first {
    padding: 0;
}
.second {
    padding: 8px 16px 24px 32px;
}