Как задаются внешние отступы в CSS?

Внешние отступы (Margin) в CSS

Margin (маржин, внешний отступ) — это расстояние за границей элемента до других элементов или края контейнера. Это одна из ключевых концепций в CSS для контроля расстояния между элементами.

Различие: Margin vs Padding

┌─────────────────────────────┐
│        Margin               │ внешний отступ (снаружи)
│  ┌─────────────────────┐   │
│  │  Padding            │   │ внутренний отступ (внутри)
│  │  ┌───────────────┐  │   │
│  │  │ Content       │  │   │ содержимое
│  │  └───────────────┘  │   │
│  └─────────────────────┘   │
└─────────────────────────────┘

Margin: от границы элемента до других элементов
Padding: от границы элемента до содержимого

Способы задания margin

1. Одно значение — все стороны

/* Все стороны: 20px */
.box {
  margin: 20px;
}

/* Эквивалентно: */
margin-top: 20px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 20px;

2. Два значения — вертикальное и горизонтальное

/* Первое значение: top и bottom (вертикаль)
   Второе значение: left и right (горизонталь) */
.box {
  margin: 20px 30px;
}

/* Эквивалентно: */
margin-top: 20px;
margin-right: 30px;
margin-bottom: 20px;
margin-left: 30px;

3. Три значения — top, горизонталь, bottom

/* top (вверх)
   left и right (по сторонам)
   bottom (вниз) */
.box {
  margin: 10px 20px 30px;
}

/* Эквивалентно: */
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 20px;

4. Четыре значения — top, right, bottom, left (по часовой стрелке)

/* Порядок: top -> right -> bottom -> left (по часовой стрелке) */
.box {
  margin: 10px 15px 20px 25px;
}

/* Эквивалентно: */
margin-top: 10px;
margin-right: 15px;
margin-bottom: 20px;
margin-left: 25px;

Отдельные свойства

.box {
  margin-top: 20px;      /* отступ сверху */
  margin-right: 15px;    /* отступ справа */
  margin-bottom: 20px;   /* отступ снизу */
  margin-left: 15px;     /* отступ слева */
}

Единицы измерения

/* Абсолютные единицы */
.box {
  margin: 20px;   /* пиксели */
  margin: 2cm;    /* сантиметры */
  margin: 0.5in;  /* дюймы */
}

/* Относительные единицы */
.box {
  margin: 2em;    /* относительно font-size элемента */
  margin: 2rem;   /* относительно font-size root элемента */
  margin: 5%;     /* процент от ширины родителя */
}

/* Специальные значения */
.box {
  margin: auto;   /* центрировать элемент */
  margin: 0;      /* нет отступа */
  margin: inherit; /* унаследовать от родителя */
}

Практические примеры

Пример 1: Центрирование по горизонтали

/* Для блочного элемента с известной шириной */
.container {
  width: 400px;
  margin: 0 auto; /* 0px сверху/снизу, auto справа/слева */
  /* Равномерные отступы справа и слева центрируют элемент */
}

Пример 2: Стандартные отступы между элементами

/* Расстояние только снизу */
.paragraph {
  margin-bottom: 20px;
}

.heading {
  margin-bottom: 15px;
}

.button {
  margin-right: 10px; /* расстояние между кнопками */
}

Пример 3: Box model

.card {
  width: 300px;
  padding: 20px;      /* внутренний отступ */
  border: 1px solid #ccc;
  margin: 30px;       /* внешний отступ */
  background: white;
}

/* Полный размер элемента: 300px + 20px*2 + 1px*2 + 30px*2 = 402px */

Пример 4: Отрицательный margin

/* Можно использовать отрицательный margin */
.image {
  margin: -10px; /* элемент выступает за границы */
}

.overlap {
  margin-top: -20px; /* перекрывает предыдущий элемент */
}

Коллапс margin (margin collapse)

Это важный концепт! Вертикальные маржины блочных элементов могут объединяться.

/* Родитель */
.container {
  margin-top: 50px;
}

/* Первый потомок */
.first-child {
  margin-top: 30px;
}

/* Результат: margin-top будет 50px (максимум из двух) */
/* НЕ 50px + 30px = 80px! */

Пример в HTML:

<style>
  .parent {
    margin-top: 50px;
    background: lightblue;
  }
  
  .child {
    margin-top: 30px; /* объединится с parent margin */
    background: lightcoral;
  }
</style>

<div class="parent">
  <div class="child">Отступ вверх будет 50px (не 80px!)</div>
</div>

Чтобы избежать коллапса:

/* Способ 1: Добавить padding к родителю */
.parent {
  padding-top: 1px; /* или border-top */
}

/* Способ 2: Использовать flexbox или grid */
.parent {
  display: flex;
  flex-direction: column;
}

/* Способ 3: Использовать overflow */
.parent {
  overflow: hidden;
}

Margin в Flexbox и Grid

Flexbox

.container {
  display: flex;
  gap: 20px; /* современный способ для Flexbox */
}

.item {
  margin: 10px; /* работает дополнительно к gap */
}

Grid

.container {
  display: grid;
  gap: 20px; /* расстояние между ячейками */
}

.item {
  margin: 10px; /* работает дополнительно к gap */
}

Margin в React/Tailwind

// Инлайн стили
<div style={{ margin: '20px' }}>Content</div>
<div style={{ marginTop: '10px', marginBottom: '20px' }}>Content</div>

// Tailwind классы
<div className="m-5">margin: 20px (5 = 5*4px = 20px)</div>
<div className="mt-3">margin-top: 12px</div>
<div className="mx-auto">margin-left/right: auto (центрирование)</div>
<div className="mx-5 my-10">margin-x и margin-y</div>
<div className="-mt-5">отрицательный margin: -20px</div>

Best Practices

1. Используй единообразные отступы

/* Определи систему отступов */
:root {
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
}

.card {
  margin-bottom: var(--spacing-md);
}

2. Избегай горизонтального коллапса

/* Горизонтальные маржины НЕ коллапсируются */
/* Это проблема только для вертикальных маржин */
.button {
  margin-right: 10px;
}

.button:last-child {
  margin-right: 0; /* убрать последний отступ */
}

3. Предпочитай margin-bottom вместо margin-top

/* ХОРОШО: предсказуемо */
.paragraph {
  margin-bottom: 20px; /* каждый параграф имеет отступ снизу */
}

/* ПЛОХО: неопредсказуемо из-за коллапса */
.paragraph {
  margin-top: 20px; /* может объединиться с предыдущим элементом */
}

4. Используй gap в Flexbox/Grid

/* ХОРОШО: для распределения в контейнерах */
.container {
  display: flex;
  gap: 20px;
}

/* Вместо этого: */
.item {
  margin-right: 20px; /* может привести к лишним отступам */
}

5. Центрирование

/* Блочный элемент с шириной */
.box {
  width: 400px;
  margin: 0 auto; /* центрировать */
}

/* Flexbox (современный способ) */
.container {
  display: flex;
  justify-content: center;
}

/* Grid */
.container {
  display: grid;
  place-items: center;
}

Отладка margin

/* Добавь временный фон для видимости */
.box {
  margin: 20px;
  background: rgba(255, 0, 0, 0.3); /* красный прозрачный */
  outline: 2px solid red; /* контур для видимости margin */
}

/* В DevTools: Inspect -> Box Model */
/* Видны: margin (оранжевый) -> border (жёлтый) -> padding (зелёный) -> content (синий) */

Таблица приоритетов margin

/* Margin никогда не может быть отрицательным для padding */
/* Но может быть отрицательным сам по себе */

.box {
  margin: -10px;      /* Допустимо */
  padding: -10px;     /* Недопустимо! padding >= 0 */
}

Итог

Margin задаётся в CSS для контроля расстояния между элементами:

1. Синтаксис: margin: top right bottom left (или 1-3 значения)
2. Единицы: px, em, rem, %, auto
3. Коллапс: вертикальные маржины могут объединяться
4. Центрирование: margin: 0 auto для блочных элементов
5. Современный способ: gap в Flexbox/Grid вместо margin
6. Best Practice: используй систему отступов (spacing scale)