Разбираемся с отступами в CSS отличие margin и padding

В моей практике ученики часто путают базовые понятия и одним из них является отличие внешних (margin) и внутренних (padding) отступов. Сегодня разберёмся в чем разница и как их использовать.

Типы отступов

Отступы делятся на два типа – внешние и внутренние.

Внешний отступ – margin

margin – это внешний отступ. Он используется для создания пространства между элементами. Представим это в виде листов бумаги – два листа лежат рядом, пространство между ними – внешний отступ одного элемента от другого.

Отрицательный margin

Есть такая особенность – отрицательный наружный отступ. Обычно он используется для того чтобы наслоить элементы друг на друга, так сказать, для красоты. Чаще всего используется margin-top с отрицательным значением (но лучше использовать transform: translateY(-100px);).

Второй вариант использования – выход за рамки. Например, если элемент находится в контейнере, но должен выходить за его рамки. Тогда мы ставим margin: 0 -50px; – то есть отрицательный отступ справа и слева.

Примеры доступны по ссылке.

Особенности margin

• Вне границ элемента
• Не увеличивает размер блока
• Не складывается (коллапсирует). Если у вас для верхнего элемента стоит margin-bottom, а для нижнего margin-top – то отступом между ними будет не результат их сложения, а просто наибольший из двух.
• Есть отрицательный margin

Внутренний отступ – padding

padding – это внутренний отступ. Используется для создания отступа от краёв блока, страницы, элемента и тд. В аналогии листа бумаги – это рамка, внутри которой мы пишем в листе.

Используйте их только так. Рассмотрим на примерах.

Особенности padding

• Внутри границ элемента
• Увеличивает размер блока
• Создает отступы от границ блока

Чтобы padding не влиял на размер элемента, можно использовать box-sizing: border-box; – тогда если вы поставите width для элемента – padding не будет увеличивать блок больше заданной ширины.

Примеры отступов

Все примеры доступны по ссылке.

Отступ между идущими подряд элементами

Самый простой пример – это отступ между двумя идущими подряд элементами, например, h1 и p:

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

! Поэтому лучше всегда сбрасывать отступ у таких элементов, чтобы не запутаться в нем в дальнейшем. Я обычно ставлю такое правило:

h1, h2, h3, h4, p, ul {
   margin: 0;
}

Но имейте ввиду, что если используете css-библиотеки это может повлиять на них.

Также, чтобы не запутаться в margin – лучше заранее определить поток. Поток – это выбранное направление “движения” отступов.

Основные подходы, которые я использую:

• Только нижний и правый отступ
• Только верхний и правый отступ

В первом варианте – верхний элемент всегда толкает нижний, а левый – толкает правый. То есть всегда ставится margin-right и margin-bottom.

Во втором варианте, нижний элемент отталкивается он верхнего, а левый – толкает правый. То есть всегда ставится margin-right и margin-top.

Эти правила просто помогают упростить понимание поведения элементов и не путаться в различных margin и их обнулении.

Карточка

Возьмём стандартную карточку и посмотрим, что мы можем в ней использовать.

Тут мы видим несколько отступов:

1. У карточки от ее краёв
2. Между текстом и img
3. У текста от краёв карточки
4. Между заголовком и параграфом

Попробуйте самостоятельно определить, какой отступ где будем использовать.

1. Очевидно padding потому что это внутренний отступ не влияющий на внешние элементы – только на внутренние.
2. Тут логично поставить margin-bottom для img или margin-top для текста (в зависимости от подхода). Но мы можем взять отступ 3 – для текста и применить его по кругу, что тоже логично. Тогда нам не нужен внешний отступ – внутренний будет работать за него.
3. Очевидный padding – потому что применяется для элементов внутри и не влияет на внешние отступы.
4. Очевидный margin – для заголовка снизу или для параграфа сверху.

Сетка

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

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

.card {
  margin-bottom: 30px;
}

.card:not(:nth-child(4n)){
  margin-right: 40px;
}

Обратите внимание на второе правило. Тут мы используем :not() и :nth-child() – эти правила помогут нам не ставить отступ каждому четвёртому элементу, потому что лишний отступ не даст нам поместить карточки по четыре в ряд и перенесёт четвёртую карточку.

Альтернатива

В случае уменьшения размера страницы, наше правило придётся менять – оно уже не будет работать. Тогда в комнату входит gap – который позволяет ставить отступы только между элементами, не ставя отступы в краях. Предварительно нужно поставить списку display: flex; и flex-wrap: wrap;

gap: 30px 40px; – первое число будет значить вертикальный отступ, второе – горизонтальный отступ между элементами.

Если непонятно, то попробуйте самостоятельно в примере.

Выводы

Теперь вы знаете, что такое padding и margin – поняли отличие между ними и посмотрели примеры использования. Таблица для закрепления: