junior
В чем разница между margin и padding?
margin — это внешний отступ (расстояние от элемента до соседних элементов), а padding — внутренний отступ (расстояние от границы элемента до его содержимого).
Аналогия из жизни: представьте картину в рамке.
padding— это паспарту (поля между картиной и рамкой), аmargin— это расстояние между рамкой и стеной или другими картинами.
| Характеристика | margin |
padding |
|---|---|---|
| Тип отступа | Внешний (от границы наружу) | Внутренний (от границы внутрь) |
| Фон элемента | Не распространяется | Распространяется (видно background) |
| Отрицательные значения | Допускаются | Не допускаются |
| Схлопывание (collapsing) | Да — вертикальные margin соседей объединяются | Нет |
| Клик по области | Не вызывает события клика | Вызывает событие клика |
Визуальная схема (Box Model)
Пример
+-------------------------------------------+
| margin (внешний) |
| +-------------------------------------+ |
| | border (граница) | |
| | +-------------------------------+ | |
| | | padding (внутренний) | | |
| | | +-------------------------+ | | |
| | | | content | | | |
| | | +-------------------------+ | | |
| | +-------------------------------+ | |
| +-------------------------------------+ |
+-------------------------------------------+
Схлопывание margin
Если два блочных элемента расположены вертикально и у верхнего margin-bottom: 20px, а у нижнего margin-top: 30px, итоговый отступ будет 30px (больший из двух), а не 50px.
На собеседовании: интервьюер ожидает знание Box Model и феномена схлопывания margin. Частая ошибка — не упомянуть collapsing margins.