Коротко: padding — это внутренний отступ, он добавляет пространство внутри блока между содержимым и границей. margin — внешний отступ, он отодвигает блок от соседних элементов. Оба влияют на раскладку, но по-разному.
Ключевое отличие
| Свойство | Что делает |
|---|---|
padding |
пространство внутри, увеличивает зону клика |
margin |
пространство снаружи, отодвигает от соседей |
Наглядно
.card {
padding: 24px; /* воздух внутри карточки */
margin-bottom: 16px; /* отступ до следующей карточки */
background: #003F8F; /* фон закрашивает padding, но не margin */
}Фон элемента покрывает содержимое и padding, но не заходит в margin. Клик по кнопке срабатывает в области padding, но не margin.
Вкладки: тонкости
/* без box-sizing ширина + padding */
width: 200px; padding: 20px; /* итог 240px */
/* с border-box padding входит в ширину */
* { box-sizing: border-box; }padding увеличивает фактический размер блока, если не задан box-sizing: border-box. С ним padding входит в заданную ширину.
Вертикальные margin соседних блоков «схлопываются»: из двух берётся больший, а не сумма. Это называется margin collapse. У padding такого нет.
.pull-up { margin-top: -24px; }Отрицательный margin сдвигает блок в обратную сторону и может наложить его на соседа. padding отрицательным быть не может.
padding. Нужно отодвинуть блок от соседей снаружи — margin. Если сомневаетесь, подумайте, где должен заканчиваться фон и область клика.Практика: выбрать отступ
- Определите, внутри или снаружи нужно пространство.
- Внутри рамки —
padding. - Между блоками —
margin. - Включите
box-sizing: border-boxглобально. - Для отступов между элементами попробуйте
gapво flex. - Проверьте, как выглядит на мобильном.
Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Блок шире, чем задано | padding без border-box |
включить box-sizing |
| Отступ меньше ожидаемого | схлопнулись margin |
использовать padding или gap |
| Кнопка мала для клика | мало padding |
увеличить внутренний отступ |
| Фон не закрасил промежуток | это margin |
перенести в padding |
| Элементы наложились | отрицательный margin |
убрать или скорректировать |
Проверьте себя
padding?
Вопросы и ответы
Это margin collapse: соседние вертикальные margin объединяются, побеждает больший. У padding и у горизонтальных margin такого эффекта нет.
Режим, при котором padding и рамка входят в заданную ширину. Это избавляет от сюрпризов при расчёте размеров. Обычно его задают для всех элементов сразу.
Во flex и grid удобнее свойство gap: оно задаёт отступы между элементами без схлопывания и без лишних крайних отступов.
Нет, отрицательный padding недопустим. Отрицательным бывает только margin, и это приём для наложения элементов.
Итоги
padding— внутренний отступ,margin— внешний.- Фон закрашивает
padding, но неmargin. paddingувеличивает размер безborder-box.- Вертикальные
marginсхлопываются,padding— нет.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.