Чем margin отличается от padding?

Основное различие между margin и padding

В CSS box model каждый элемент состоит из содержимого (content), внутреннего отступа (padding), границы (border) и внешнего отступа (margin). Padding — это пространство между содержимым элемента и его границей. Он увеличивает видимую область элемента, влияя на его размер. Margin — это пространство вокруг границы элемента, которое отделяет его от других элементов. Он не влияет на размер самого элемента, но влияет на его положение на странице.

Ключевые особенности

• Схлопывание margin: Вертикальные margin соседних блочных элементов могут объединяться (схлопываться) в один, равный большему из них. Padding никогда не схлопывается.
• Отрицательные значения: Margin может быть отрицательным, что позволяет накладывать элементы друг на друга или сдвигать их. Padding не может быть отрицательным.
• Фон и кликабельность: Padding наследует фон элемента и область клика, а margin — нет.

Пример кода

.box {
  width: 200px;
  height: 100px;
  background: lightblue;
  padding: 20px;  /* внутренний отступ, увеличивает размер */
  margin: 30px;   /* внешний отступ, создает расстояние */
  border: 2px solid black;
}

В этом примере padding добавит 20px пространства внутри элемента, увеличив его общую ширину до 244px (200 + 20*2 + 2*2). Margin создаст 30px пустого пространства вокруг границы, отодвигая элемент от соседей.

Вывод

Используйте padding, когда нужно создать пространство внутри элемента (например, отступ текста от края кнопки). Используйте margin, когда нужно управлять расстоянием между элементами (например, отступ между карточками). Понимание этой разницы критично для создания предсказуемых и адаптивных макетов.