Исполняемые доки CSS: Margin и padding

Q: Что увеличивает размер элемента, padding или margin?

Padding увеличивает при box-sizing: content-box по умолчанию: он прибавляется к ширине и высоте. Margin никогда не прибавляется к размеру элемента, он добавляет пространство вокруг (блок с width: auto даже становится уже, потому что отступы забирают часть доступной ширины). С box-sizing: border-box padding берется изнутри ширины.

Margin и padding в CSS: в чем разница, наглядно

Padding это пространство внутри рамки элемента, margin снаружи. Посмотрите на оба на одном блоке, рядом и вживую, а затем разберитесь, что использовать для фона, кликабельной области, промежутков между элементами и центрирования.

На этой странице есть исполняемые редакторы: меняйте, запускайте и сразу видите результат.

Автор Kevin Spektor, Co-founder & CTO

Опубликовано Sep 24, 2026

Разница на одной картинке

Padding внутри рамки. Margin снаружи. У обоих блоков ниже одинаковое содержимое и одно и то же значение 24px; различается только свойство. Серое это контейнер за ними.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Margin vs padding</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .row { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
    .container { display: flow-root; background: #e5e7eb; width: max-content; }
    .box {
      border: 3px solid #111827;
      background: #2563eb;
      color: white;
    }
    .with-padding { padding: 24px; }
    .with-margin { margin: 24px; }
    .label { font-size: 13px; margin: 6px 0 0; color: #111827; }
  </style>
</head>
<body>
  <div class="row">
    <div>
      <div class="container"><div class="box with-padding">Text</div></div>
      <p class="label">padding: 24px</p>
    </div>
    <div>
      <div class="container"><div class="box with-margin">Text</div></div>
      <p class="label">margin: 24px</p>
    </div>
  </div>
</body>
</html>

С padding эти 24px синие: они часть блока, внутри рамки, и блок растет. С margin эти 24px серые: блок плотно облегает текст, а пространство снаружи отодвигает края контейнера.

Попробуйте оба на одном блоке

Двигайте два ползунка. Padding увеличивает синий блок; margin отодвигает блок от серых краев, не меняя его.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sliders</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 6px; }
    .container { display: flow-root; background: #e5e7eb; width: max-content; margin-top: 10px; }
    #box { border: 3px solid #111827; background: #2563eb; color: white; }
  </style>
</head>
<body>
  <label>padding <input id="p" type="range" min="0" max="40" value="10"> <span id="pv"></span></label>
  <label>margin <input id="m" type="range" min="0" max="40" value="10"> <span id="mv"></span></label>
  <div class="container"><div id="box">Box</div></div>
  <p id="size"></p>
  <script>
    const box = document.getElementById('box');
    const p = document.getElementById('p');
    const m = document.getElementById('m');
    const update = () => {
      box.style.padding = p.value + 'px';
      box.style.margin = m.value + 'px';
      document.getElementById('pv').textContent = p.value + 'px';
      document.getElementById('mv').textContent = m.value + 'px';
      const r = box.getBoundingClientRect();
      document.getElementById('size').textContent =
        'Blue box: ' + Math.round(r.width) + ' x ' + Math.round(r.height) + 'px';
    };
    p.addEventListener('input', update);
    m.addEventListener('input', update);
    update();
  </script>
</body>
</html>

Следите за строкой с размером: она меняется, когда двигаете ползунок padding, и остается прежней, когда двигаете ползунок margin.

Margin и padding коротко

	Padding	Margin
Где	Внутри рамки	Снаружи рамки
Фон	Виден фон элемента	Всегда прозрачен
Часть кликабельной области	Да	Нет
Увеличивает размер элемента	Да, при `content-box`	Нет
Может быть `auto`	Нет	Да (`margin: 0 auto` центрирует)
Может быть отрицательным	Нет	Да
Вертикальные значения схлопываются	Никогда	Да, соседние вертикальные отступы схлопываются
Проценты считаются от	Ширины содержащего блока	Ширины содержащего блока
Типичное применение	Пространство внутри кнопок, карточек, полей	Промежутки между элементами, центрирование

У каждого свойства своя страница со всеми подробностями: padding в CSS и margin в CSS.

Что выбрать

Задайте один вопрос: пространство принадлежит элементу или находится между элементами?

Место вокруг подписи кнопки, внутренность карточки, пространство между текстом поля и его рамкой: padding. На нем виден фон, и цель становится больше.
Пространство между двумя абзацами, между карточками, вокруг секции: margin или gap, когда родитель это flex- или grid-контейнер.

Сильнее всего выбор влияет на кликабельную область. Две ссылки ниже занимают на странице одинаковое место, но у первой это пространство padding, а у второй margin. Попасть легко только в первую:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Click area</title>
  <style>
    a {
      display: inline-block;
      background: #2563eb;
      color: white;
      text-decoration: none;
      outline: 2px dashed #f59e0b; /* the clickable area */
    }
    .pad { padding: 14px 24px; }
    .mar { margin: 14px 24px; }
  </style>
</head>
<body>
  <a class="pad" href="#">Padding: big target</a>
  <a class="mar" href="#">Margin: tiny target</a>
</body>
</html>

Янтарная пунктирная обводка это край элемента, то есть область, которая реагирует на клики и касания. Margin вокруг второй ссылки это пустое место, которое ничего не делает.

Промежутки между элементами: margin или gap

Для строки или сетки элементов gap у flex- или grid-родителя обычно чище, чем margin у каждого дочернего элемента: он ставится только между элементами, никогда перед первым или после последнего, поэтому отменять ничего не нужно.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>gap</title>
  <style>
    .list { display: flex; gap: 12px; background: #e5e7eb; padding: 12px; }
    .item { background: #16a34a; color: white; padding: 12px 16px; }
  </style>
</head>
<body>
  <div class="list">
    <div class="item">One</div>
    <div class="item">Two</div>
    <div class="item">Three</div>
  </div>
</body>
</html>

Здесь серый контейнер использует padding (пространство внутри него, серое), элементы используют padding (пространство внутри каждого, зеленое), а gap отвечает за промежутки между ними.

Частые ошибки

Margin для пространства, которое должно быть цветным. Margin прозрачен. Если на пространстве должен быть виден фон, это padding.
Margin, чтобы увеличить ссылку. Кликабельная область заканчивается на рамке; используйте padding.
Ожидание, что два вертикальных отступа по 20px дадут 40px. Соседние вертикальные отступы схлопываются до 20px. Padding никогда не схлопывается.
Попытка центрировать через padding: auto. auto принимает только margin.
Забыли, что padding увеличивает блок. Добавьте box-sizing: border-box, чтобы width его включал.

Часто задаваемые вопросы

В чем разница между margin и padding?

Padding это пространство между содержимым элемента и его рамкой, внутри элемента. Margin это пространство снаружи от рамки, между элементом и его соседями. На padding виден фон элемента; margin всегда прозрачен.

Когда использовать padding, а не margin?

Padding для пространства, которое принадлежит элементу: место вокруг текста кнопки, внутренность карточки, все, что должно иметь общий фон или быть кликабельным. Margin (или gap во flex и grid) для пространства между отдельными элементами.

Что увеличивает размер элемента, padding или margin?

Padding увеличивает при box-sizing: content-box по умолчанию: он прибавляется к ширине и высоте. Margin никогда не прибавляется к размеру элемента, он добавляет пространство вокруг (блок с width: auto даже становится уже, потому что отступы забирают часть доступной ширины). С box-sizing: border-box padding берется изнутри ширины.

Может ли padding быть отрицательным, как margin?

Нет. Отрицательный padding невалиден и игнорируется, а отрицательный margin разрешен и может приводить к перекрытию элементов. Padding также не может быть auto, поэтому центрируют через margin: 0 auto.

Связанные концепции