Написать пост

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

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

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

Отступы играют важную роль в веб-дизайне — они обеспечивают расстояние между элементами и создают визуально приятный интерфейс. В 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
Следите за новыми постами
Следите за новыми постами по любимым темам
600 открытий6К показов