Margin и padding в CSS: как сразу сделать грамотно

Елена Капаца

для

Разбираемся в ключевых отличиях между этими важнейшими свойствами, а также знакомимся с трюками, чтобы UI / UX вашего сайта стал еще круче и грамотнее.

2К открытий11К показов

Отступы играют важную роль в веб-дизайне — они обеспечивают расстояние между элементами и создают визуально приятный интерфейс. В CSS для этого используют свойства margin и padding.

В этой статье я расскажу про ключевые отличия между ними, а также познакомлю с трюками, чтобы UI/UX вашего сайта стал ещё круче.

В качестве примеров я буду использовать свой сайт на Django.

Если вы хотите перейти с nocode-сайта на самописный, изучите пошаговый гайд по миграции на Python Django.

Что такое margin и padding

Как я уже сказала, в CSS для управления пространством между элементами используются два ключевых свойства:

Margin и padding в CSS: как сразу сделать грамотно 1

Margin отвечает за пространство снаружи элемента, а padding — за пространство внутри

Большая разница между ними в том, что margin автоматически сворачивается, а padding — нет.

Margin и padding в CSS: как сразу сделать грамотно 2

Виды отступов на примере

Margin

Чтобы задать внешние отступы со всех сторон, указываем их размер в пикселях (или в других юнитах):

			.el {
  margin: 20px;
}

Кстати, вот основные единицы измерения в CSS для повторения:

px (пиксели): 1px соответствует одному экранному пикселю;
cm / mm / in: санти- / миллиметры, дюймы;
em: относительно шрифта родительского элемента. Например, если шрифт родителя 16px, то 2em будет равно 32px;
rem: относительно шрифта корневого элемента. Если размер корневого шрифта 16px, то 2rem будет равно 32px;
% (проценты): относительно родительского элемента. Например, если ширина родителя 1000px, то 50% будет 500px;
vh / vw (viewport height / width): 1vh равен 1% от высоты области просмотра (viewport);
vmin / vmax: 1vmin / 1vmax равен 1% от меньшего / большего из двух измерений (ширины или высоты) области просмотра.

Отдельные значения для каждой стороны задаются постфиксами top / right / bottom / left:

			.el {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-left: 40px; /* или сразу margin: 10px 20px 30px 40px;
}

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

Чтобы разместить посередине блоковый элемент горизонтально, можно использовать постфиксы left / right:

			.el {
  width: 50%;          /* Ширина 50% родительского элемента */
  margin-left: auto;  /* Отступы слева и справа назначаются автоматически */
  margin-right: auto;
}

Перекрытие соседей

Иногда требуется сдвинуть элемент ближе к соседу:

			.el {
    width: 250;
    margin-top:-8px
}

↑ Как меняется положение текстовых блоков, если margin = 0 или < 0.

Padding

Вот основной способ задания внутренних отступов:

			.el {
  padding: 20px; /* со всех сторон */
}

Отдельные значения для каждой стороны задаются аналогично: постфиксами top, bottom, right, left. В целом синтаксис почти одинаковый.

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

			<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Padding в процентах</title>
    <style>
        .container {
            width: 500px;
            height: 200px;
            background-color: #f0f0f0;
        }

        .content {
            width: 100%;
            height: 100%;
            padding: 10%;
            background-color: #8ab3bf;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="content">
            Контент
        </div>
    </div>
</body>
</html>

Margin и padding в CSS: как сразу сделать грамотно 3

Внутренний отступ равен 50px, потому что это 10% от ширины родительского блока — 500px

Почему не работает margin

Убедитесь, что элемент является блочным, поскольку margin «дружит» только с блоками (div, p, h1-6, ul, ol. li, table, header, footer, section, article, nav).

Margin добавляет пространство вне родительского элемента

Margin и padding в CSS: как сразу сделать грамотно 4

Что получается

Margin и padding в CSS: как сразу сделать грамотно 5

Что ожидаем

Решение: дописываем свойство overflow:auto к div’у страницы.

Как увеличить пространство между колонками в таблице?

Внедряем padding-right:

			<table>
   <tr>
      <td style="padding-right:10px">data</td>
      <td>more data</td>
   </tr>
</table>

margin дочернего элемента двигает родителя

Обновляем свойства второго:

			.parent { overflow: auto } /* Или hidden */

Заключение

Эти свойства CSS создателям удалось сделать прозрачными и без подводных камней: по статистике, треды на Stack Overflow на эти темы закрываются быстрее других топиков.

На последок: с визуализатором блоков в Chrome Dev Tools вёрстка стилей значительно проще.

Margin и padding в CSS: как сразу сделать грамотно 6

Chrome Dev Tools

2К открытий11К показов

Также рекомендуем

Фронтенд-разработчик: что это за профессия и где ей обучиться

Фронтенд-разработчик: что это за профессия и где ей обучиться

Рассказываем о профессии фронтенд-разработчика: сколько получают в сфере, какие навыки нужны и где ей обучиться.

Хочу как у Apple: почему копирование дизайна сайта не работает и как найти подходящий стиль

Хочу как у Apple: почему копирование дизайна сайта не работает и как найти подходящий стиль

Рассказываем, почему не стоит копировать сайты успешных компаний и предлагаем алгоритм поиска уникального стиля для ваших проектов.

Когда фронтендеру пора остановиться в изучении HTML, CSS и JS

Когда фронтендеру пора остановиться в изучении HTML, CSS и JS

IT-блогер Chris Sean рассказал, каких знаний в HTML, CSS и JS достаточно для работы во фронтенде.

Работа над Serverless SSR, новости CSS и партия в DnD. Ретроперспектива недели с Сергеем Совой

Работа над Serverless SSR, новости CSS и партия в DnD. Ретроперспектива недели с Сергеем Совой

Запускаем новую рубрику на Tproger. В первом выпуске — Сергей Сова, разработчик, фронтендер и подкастер, делится своими мыслями о Serverless SSR, новостях CSS и мастхев книге.