Поля и отступы

В CSS поля (margin) и отступы (padding) позволяют управлять расстояниями вокруг и внутри элементов.

Margin (поля)

Свойство margin задаёт расстояние снаружи элемента, между элементом и другими объектами:

div {
  margin: 20px; /* одинаковый отступ со всех сторон */
}
div {
  margin-top: 10px;
  margin-right: 15px;
  margin-bottom: 10px;
  margin-left: 15px;
}

Padding (отступы)

Свойство padding задаёт расстояние внутри элемента, между содержимым и границей:

div {
  padding: 10px; /* одинаковый отступ внутри */
}
div {
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 5px;
  padding-left: 10px;
}

Различие между margin и padding

  • Margin — пространство снаружи элемента.
  • Padding — пространство внутри элемента, между границей и содержимым.

Советы

  • Используй сокращённые записи, например margin: 10px 20px; для вертикальных и горизонтальных отступов.
  • Для визуального центрирования элементов часто используют комбинацию margin: auto;.
  • Padding полезен для внутреннего "воздуха" вокруг текста или изображений.