Отступ сверху CSS и другие расстояния между элементами

Отступ сверху CSS задают свойством margin-top или сокращенной записью margin. Для отступа сверху HTML-элемента и расстояния внутри него применяйте margin и padding. Разберем блочную модель, сокращенную запись свойств и примеры для списка, таблицы, формы и div.

Блочная модель: где находятся margin и padding

Браузер строит элемент из содержимого, внутреннего отступа, границы и внешнего отступа. Содержимое занимает область текста или дочерних элементов. padding лежит между содержимым и границей.

Фон элемента закрашивает область содержимого и padding.

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

Свойство box-sizing меняет расчет ширины. При значении content-box заданная ширина относится к содержимому, а padding и border добавляются сверху. При значении border-box ширина уже включает содержимое, padding и border.

* {
  box-sizing: border-box;
}

.card {
  width: 300px;
  padding: 20px;
  border: 2px solid #333;
}

При border-box ширина карточки вместе с рамкой составляет 300 пикселей. При content-box она составит 344 пикселя: 300 + 40 + 4. В обоих случаях margin остается за пределами этой ширины.

Внешний отступ CSS: синтаксис margin

Свойство margin принимает одно или несколько значений. Одна величина задает одинаковый внешний отступ со всех сторон:

.block {
  margin: 50px;
}

Четыре значения идут по часовой стрелке: сверху, справа, снизу, слева. Отступ справа CSS задает второе значение, а отступ слева CSS – четвертое. Поэтому запись margin: 10px 20px 50px 100px; означает 10 пикселей сверху, 20 справа, 50 снизу и 100 слева.

.block {
  margin: 10px 20px 50px 100px;
}

Сокращенная запись с двумя значениями задает вертикальный и горизонтальный отступ. Три значения задают верхний, горизонтальный и нижний отступ.

.two-values {
  margin: 10px 20px;
}

.three-values {
  margin: 10px 20px 30px;
}

Отдельные свойства полезны, когда у каждой стороны свое значение:

.block {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-left: 40px;
}

Свойство margin-top задает внешний отступ сверху, не меняя остальные стороны.

Для центрирования обычного блока задайте ширину и margin: 0 auto;. Если блок уже контейнера, браузер распределит свободное место по бокам поровну.

.centered {
  width: 300px;
  margin: 0 auto;
}

Синтаксис свойства padding

Свойство padding использует тот же порядок значений: сверху, справа, снизу, слева. Одна величина создает одинаковое внутреннее пространство:

.button {
  padding: 12px;
}

Две величины задают вертикальный и горизонтальный padding, три – верхний, горизонтальный и нижний. Четыре величины описывают стороны по отдельности.

.button {
  padding: 10px 20px 15px 25px;
}

.input {
  padding-top: 8px;
  padding-right: 12px;
  padding-bottom: 8px;
  padding-left: 12px;
}

Для размеров отступов применяют px, em, rem, pt и проценты. Значение auto принимает margin, но не padding.

При обычном горизонтальном письме проценты рассчитываются от ширины содержащего блока. Это правило действует для margin и padding, включая вертикальные стороны.

Отрицательные значения разрешены у margin. Padding не может быть отрицательным.

В современной верстке пригодятся логические свойства margin-inline, margin-block, padding-inline и padding-block. Они привязывают отступ к направлению текста и упрощают поддержку разных языков.

Margin и padding: сравнение свойств

Если фон должен заполнить свободное место внутри рамки, выбирайте padding. Если нужно отодвинуть блок от соседей, выбирайте margin.

Пример с div и отступами внутри карточки

Элемент div удобно использовать как контейнер карточки. Padding отделяет текст от рамки, а margin задает промежуток между карточками.

<div class="card">
  <h3>Заголовок</h3>
  <p>Текст карточки</p>
</div>

.card {
  max-width: 320px;
  padding: 20px;
  margin: 0 auto 24px;
  border: 1px solid #ccc;
  background: #f5f5f5;
}

.card h3 {
  margin-top: 0;
}

Карточка получает запись margin: 0 auto 24px: верхний отступ исчезает, блок центрируется по горизонтали, а снизу остается 24 пикселя. Сброс верхнего margin у заголовка убирает лишний зазор внутри карточки.

Расстояние между элементами CSS в меню

Ссылки меню получают display: block, чтобы занять всю строку. У строчного элемента вертикальный margin не сдвигает соседние строки так, как ожидает начинающий верстальщик.

<ul class="menu">
  <li><a href="#">Главная</a></li>
  <li><a href="#">Каталог</a></li>
</ul>

.menu {
  padding: 10px;
}

.menu a {
  display: block;
  padding: 10px;
  margin: 2px;
  color: #fff;
  text-decoration: none;
  background-color: #da8119;
}

Padding увеличивает область ссылки вокруг текста. Margin создает зазор между соседними ссылками.

Расстояние между блоками CSS и ячейками таблицы

У ячеек td margin не работает как способ раздвинуть ячейки. Внутренний отступ задают через padding, а промежуток между ячейками – через border-spacing. Отдельные границы объединяет border-collapse: collapse, поэтому промежутки исчезают.

<table class="prices">
  <tr><td>Товар</td><td>Цена</td></tr>
  <tr><td>Книга</td><td>900 ₽</td></tr>
</table>

.prices {
  border-collapse: separate;
  border-spacing: 8px;
}

.prices td {
  padding: 20px;
  border: 1px dashed #df7000;
  color: #000;
  background: #d0e8ac;
}

Увеличьте padding, когда тексту тесно внутри ячейки. Измените border-spacing, когда нужно увеличить промежуток между ячейками.

Отступ снизу CSS и промежуток между полями

Padding в поле формы создает пространство между содержимым и границей. Выравнивание текста задает text-align, а padding только меняет внутренний размер поля.

<form class="form">
  <input type="text" aria-label="Имя" placeholder="Имя">
  <input type="email" aria-label="Почта" placeholder="Почта">
  <button type="submit">Сохранить</button>
</form>

.form input {
  display: block;
  padding: 10px;
  margin: 0 0 8px;
}

.form button {
  padding: 9px 15px;
  text-align: center;
}

Нижний margin оставляет между полями промежуток в 8 пикселей.

Отрицательный margin позволяет сблизить поля вплоть до наложения границ. Для отдельного примера добавьте после основных стилей следующие правила:

.form input {
  margin: 0;
}

.form input + input {
  margin-top: -3px;
}

Первое правило сбрасывает прежний нижний отступ в 8 пикселей. Второе задает верхний margin только полю сразу после другого поля. В этой форме второе поле поднимется на 3 пикселя относительно положения с нулевыми отступами.

Соседние вертикальные margin этих блочных полей схлопываются: 0 и −3px дают −3px. Двух отрицательных отступов в этом примере нет.

Для обычной формы безопаснее задавать положительный промежуток одной стороне. Чтобы вернуть исходные 8 пикселей, удалите оба дополнительных правила. Padding полей и кнопки при этом останется прежним.

Схлопывание вертикальных margin

Вертикальные margin соседних блоков в обычном потоке могут схлопываться.

Для положительных значений браузер оставляет наибольшее. Например, у блоков с margin-bottom: 20px и margin-top: 30px общий промежуток составит 30 пикселей.

• Если все схлопывающиеся значения отрицательные, браузер выбирает наиболее отрицательное. Отступы −3px и −3px дают −3px; −3px и −8px дают −8px.
• Если значения имеют разные знаки, браузер складывает наибольшее положительное и наиболее отрицательное. Отступы 20px и −3px дают промежуток 17px.

Горизонтальные margin не схлопываются.

Схлопывание бывает и между родителем и первым или последним потомком. Верхний margin первого ребенка может выйти за пределы родителя. Нижний margin последнего ребенка тоже может схлопнуться с родительским, если высота родителя автоматическая и другие условия этому не препятствуют.

<div class="parent">
  <p class="child">Текст с верхним отступом</p>
</div>

.parent {
  background: #eee;
}

.child {
  margin: 30px 0 0;
}

В этом примере верхний margin абзаца выходит за серую область родителя. Чтобы сохранить отступ внутри, добавьте родителю ненулевой padding сверху:

.parent {
  padding-top: 1px;
}

Серый фон теперь покрывает пространство над текстом, включая отступ абзаца. Для нижней стороны аналогично работает ненулевой padding-bottom. Нулевой padding не препятствует схлопыванию.

Рамка ненулевой толщины на соответствующей стороне тоже разделяет отступы родителя и потомка.

Если дополнительное пространство или рамка не нужны, используйте display: flow-root:

.parent {
  display: flow-root;
}

Родитель перестанет схлопывать margin со своими потомками. При этом flow-root не отменяет схлопывание между соседними блоками внутри него.

Другой вариант – создать flex- или grid-контейнер. Отступы его прямых дочерних элементов не схлопываются между собой или с контейнером. Свойство gap задает промежутки между этими элементами.

Расстояние между словами CSS и элементами сетки

Margin и padding отвечают за коробки. Для расстояния внутри текста применяйте отдельные свойства.

Расстояние между словами CSS меняет свойство word-spacing. Между строчками CSS расстояние задает line-height, влияя на межстрочный интервал.

.article p {
  word-spacing: 2px;
  line-height: 1.6;
}

.article h2 {
  margin-bottom: 12px;
}

Высота строки определяется значением line-height: 1.6 и составляет 1,6 размера шрифта.

Расстояние между текстом и границей задает padding. Промежуток между текстовым блоком и соседним блоком задает margin.

Для flex и grid используйте gap, row-gap и column-gap. Они создают промежутки между элементами контейнера и не добавляют внешний отступ по краям группы.

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

В такой сетке промежутки между строками и колонками составят 16 пикселей.

Как сделать отступ в CSS для разных задач

• Нужно отделить содержимое от рамки. Используйте padding.
• Нужно раздвинуть соседние блоки. Используйте margin или gap у flex/grid-контейнера.
• Нужно центрировать блок. Задайте ширину и примените margin: 0 auto.
• Нужно задать разные стороны. Используйте четыре значения или логические свойства.
• Появился неожиданный сдвиг сверху. Проверьте схлопывание margin и границы родителя.

Если сдвиг остается неожиданным, проверьте блочную модель и схлопывание margin, затем меняйте значения отступов. Такой порядок помогает найти источник проблемы без подбора случайных чисел.

Совет: начинайте с проверки родителя и соседних блоков, а затем задавайте отступ нужной стороне элемента.