Правила организации отступов в вёрстке — грамотно и без ошибок

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

Правила организации отступов в вёрстке помогают знать как будут вести себя блоки и элементы после изменений. Грамотная структура отступов позволит легко изменять, дополнять и масштабировать каждый элемент вёрстки.

Зеркальные системы отступов

В основном верстальщики придерживаются двух противоположных друг другу систем организации отступов.

В одной используются направления сверху вниз и вправо, в другой снизу вверх и влево. Я буду рассказывать о той, которой пользуюсь и которая комфортна для моего восприятия.

Я, как и каждый русский человек, с детства воспринимаю информацию сверху вниз и слева направо, такой метод мне привычен с детства ещё по чтению книг, тот же порядок использует браузер при выводе объектов в дом-дереве. Поэтому я использую эти правила организации отступов в вёрстке.

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

Внешние отступы задаём от предыдущего элемента к следующему

При вёрстке элементов стараемся использовать только CSS-свойства margin-right и margin-bottom, которые задают отступ справа и снизу.

Внешние отступы вверх: margin-top и влево: margin-left не используем (есть исключения из правил), когда блоку понадобятся подобные отступы используем внутренние отступы padding вместо margin для родительского блока.

Внешние отступы задаются по направлению потока вывода элементов в дом-дереве. Блок сам не смещается, а толкает соседей.

Margin(ы) задаются только между соседними по уровню вложенности элементами в дом-дереве

Если у элемента нет соседа снизу, то задавать ему внешний отступ вниз нельзя — это же правило работает для каждой из сторон.

Посмотрите на код ниже, который содержит разметку трёх одинаковых элементов со списком внутри.

									
<section class="section">
	<div class="section__block">
		<div class="section__list-wrapper">
			<ul class="section__list">
				<li class="section__list-item">
					Далеко-далеко за словесными горами.
				</li>

				<li class="section__list-item">
					В стране гласных и согласных живут, рыбные тексты.
				</li>
			</ul>
		</div>
	</div>

	<div class="section__block">
		<div class="section__list-wrapper">
			<ul class="section__list">
				<li class="section__list-item">
					Далеко-далеко за словесными горами.
				</li>

				<li class="section__list-item">
					В стране гласных и согласных живут, рыбные тексты.
				</li>
			</ul>
		</div>
	</div>

	<div class="section__block">
		<div class="section__list-wrapper">
			<ul class="section__list">
				<li class="section__list-item">
					Далеко-далеко за словесными горами.
				</li>

				<li class="section__list-item">
					В стране гласных и согласных живут, рыбные тексты.
				</li>
			</ul>
		</div>
	</div>
</section>
									
								

Чтобы разделить списки отступами неправильно будет задавать отступ внутренним элементам: <ul>, <li>, <div class="section__list-wrapper">, потому что у них нет соседа по уровню вложенности в дом-дереве. Правильно будет прописать внешний отступ для <div class="section__block">, так как это последний возможный элемент в дом-дереве у которого есть сосед снизу и кому возможно задать внешний отступ для разделения списков.

То есть отступ задаётся не за счёт дочерних элементов, а за счёт крайних соседних элементов в дом-дереве. Отступы по умолчанию обнуляются.

Отступ прописывается последнему возможному блоку в доме-дереве

Смотрим код ниже.

									
<section class="section">
	<h2 class="section__title">Заголовок секции</h2>

	<p>Описание секции</p>
</section>
									
								

В этом примере, если делать отступ сверху для заголовка, то последний элемент, которому возможно прописать отступ это родительская секция <section class="section">, ей и задаётся внутренний отступ сверху — padding-top.

У последнего элемента группы отступ обнуляется

Возьмём для примера логотип и навигацию. Между элементами отступ в 30 пикселей, в том числе между всеми лишками в списке, кроме последней.

									
<header class="header">
	<a class="header__logo logo" href="#">
		<img class="logo__image" src="#" alt="Logo">
	</a>

	<nav class="header__nav nav">
		<ul class="nav__list">
			<li class="nav__item">Пункт 1</li>
			<li class="nav__item">Пункт 2</li>
			<li class="nav__item">Пункт 3</li>
			<li class="nav__item">Пункт 4</li>
		</ul>
	</nav>
</header>
									
								

Сделаем это псевдо-классами CSS.

									
.header__logo {
	margin-right: 30px;
}

.nav__item:not(:last-child) {
	margin-right: 30px;
}
									
								

Или флексами.

									
.header {
	display: flex;
	align-items: center;
	column-gap: 30px;
}

.nav__list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	row-gap: 10px;
	column-gap: 30px;
}
									
								

Независимым элементам (БЭМ-блокам) отступы не задаются

Этот пункт правил организации отступов в вёрстке касается тех элементов, которые используются несколько раз — вставляем элемент в любом месте страницы или сайта и стили сразу применяются к нему. Такие блоки есть в разных методологиях именования классов CSS, я пользуюсь БЭМ.

Не задавайте внешних отступов блокам, используемым не один раз.

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

• наследования через родителя;
• добавлением дополнительных классов или модификаторов;
• миксованием классов (делаем из блока элемент).

									
<div class="card">
	<img class="card-img" src="#" alt="Картинка">

	<h3 class="title">Заголовок карточки</h3>

	<p>Описание в две строки</p>
</div>

<div class="card card--with-margins">
	<img class="card-img" src="#" alt="Картинка">

	<h3 class="title">Заголовок карточки</h3>

	<p>Описание в две строки</p>
</div>

<div class="card">
	<img class="card-img card-img--with-margin" src="#" alt="Картинка">

	<h3 class="title title--with-margin">Заголовок карточки</h3>

	<p>Описание в две строки</p>
</div>

<div class="card">
	<img class="card-img card__img" src="#" alt="Картинка">

	<h3 class="title card__title">Заголовок карточки</h3>

	<p>Описание в две строки</p>
</div>
									
								

В коде выше четыре карточки. В каждой карточке, кроме первой нужны отступы вниз от изображения и заголовка. Зададим их тремя описанными способами. Для второй карточки применим метод наследование через родителя, для третьей карточки зададим дополнительные классы (модификаторы), для четвёртой карточки сделаем миксование классов — превратим блок в элемент.

									
/* Вторая карточка */
.card--with-margins > .card-img, .card--with-margins > .title {
	margin-bottom: 16px;
}

/* Третья карточка */
.card-img--with-margin {
	margin-bottom: 16px;
}

.title--with-margin {
	margin-bottom: 16px;
}

/* Четвёртая карточка */
.card__img {
	margin-bottom: 16px;
}

.card__title {
	margin-bottom: 16px;
}
									
								

Когда эти правила организации отступов в вёрстке не подойдут — исключения из правил

Публикация информации на сайт через текстовый редактор в админке CMS — при этом применяют отступы заданные браузером по умолчанию.

«Динамический контент». Когда элемент генерируется (создаётся) после блока, то отступы задают уже ему.

Отрицательные margin, padding или auto для контейнера.

Распространённый пример — отступы в карточке статьи

Простая карточка: изображение, дата, категория, заголовок, описание и ссылка на прочтение статьи.

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

Ниже код html-структуры и css с заданными отступами.

									
<div class="card-blog">
	<img class="card-blog__img" src="#" width="370" height="208" alt="Картинка">

	<div class="card-blog__info info">
		<div class="info__top">
			<time class="card-blog__date" datetime="2018-12-22" itemprop="datePublished">
				22/12/2018
			</time>

			<a class="card-blog__category" href="#">
				Категория
			</a>
		</div>

		<h3 class="card-blog__title">
			Заголовок
		</h3>

		<p class="card-blog__description">
			Мы рисуем, а затем программируем СЕО-оптимизированные под основные поисковые системы сайты. Наш веб-дизайн гарантирует попадание в топ выдачи...
		</p>

		<a class="card-blog__more" href="#">
			Читать далее
		</a>
	</div>
</div>
									
								

									
/* Вариант с margin */
.info {
	padding: 30px;
}

.info__top, .card-blog__title, .card-blog__description {
	margin-bottom: 20px;
}

/* Вариант с flex */
.info {
	display: flex;
	flex-direction: column;
	gap: 20px;

	padding: 30px;
}
									
								

Заключение

Итак подытожим и повторим все правила организации отступов в вёрстке:

• Внешние отступы задаём от предыдущего элемента к следующему;
• Margin(ы) задаются только между соседними по уровню вложенности элементами в дом-дереве;
• Отступ прописывается последнему возможному блоку в доме-дереве;
• У последнего элемента группы отступ обнуляется;
• Независимым элементам (БЭМ-блокам) отступы не задаются.

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

Успеха!