.c-nav li {
    /* Благодаря этому созданы те пространства, которые видны на макете */
    display: inline-block;
}

И наконец, у имени пользователя и аватара есть левый внешний отступ.

.c-user img,
.c-user span {
    margin-left: 10px;
}

Обратите внимание на то, что если вы создаёте многоязычный сайт, рекомендовано в подобной ситуации использовать логические CSS-свойства:

.c-user img,
.c-user span {
    margin-inline-start: 1rem;
}

Расстояния до и после разделителя неодинаковы

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

• Настройка минимальной ширины для навигационных элементов.
• Увеличение горизонтального внутреннего отступа.
• Добавление в левой части разделителя дополнительного внешнего отступа.

Лучше и легче всего воспользоваться третьим способом, который заключается в настройке свойства margin-left:

.c-user {
    margin-left: 8px;
}

→ Вот демонстрация

▍Расстояния в сеточных макетах — CSS Flexbox

Сеточные макеты — это то место, где часто применяются технологии настройки расстояния между элементами. Рассмотрим следующий пример.

Сеточный макет

Нам нужно настроить расстояние между строками и столбцами таблицы. Вот разметка:

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

.grid--4 {
    display: flex;
    flex-wrap: wrap;
}

.grid__item {
    flex-basis: 25%;
    margin-bottom: 16px;
}

Благодаря этому CSS-коду в каждой строке будет четыре карточки. Вот один из возможных способов настройки расстояния между ними:

.grid__item {
    flex-basis: calc(25% - 10px);
    margin-left: 10px;
    margin-bottom: 16px;
}

Благодаря использованию CSS-функции calc() внешний отступ вычитается из flex-basis. Как видите, это не такое уж и простое решение. Я, на самом деле, предпочитаю следующее:

• Настроить у элемента сетки свойство padding-left.
• Настроить у родительского элемента отрицательный внешний отступ margin-left с тем же значением, что и у padding-left.

Я узнал об этом методе много лет назад, прочитав здесь какую-то статью, название которой уже забыл (если знаете о том, что это за статья — пожалуйста дайте мне знать).

.grid--4 {
    display: flex;
    flex-wrap: wrap;
    margin-left: -10px;
}

.grid__item {
    flex-basis: 25%;
    padding-left: 10px;
    margin-bottom: 16px;
}

Причина, по которой я использовал здесь отрицательное значение для margin-left, заключается в том, что у первой карточки есть свойство padding-left, которое, в реальности, не нужно. В результате я перемещаю элемент-обёртку влево и избавляюсь от ненужного пространства.

→ Вот рабочий пример

Ещё одна похожая идея заключается в использовании внутренних отступов и отрицательных внешних отступов. Вот — пример с сайта Facebook.

Внутренние и внешние отступы

Вот CSS-код, иллюстрирующий эту идею:

.wrapper {
    margin-left: -4px;
    margin-right: -4px;
}

.story {
    padding-left: 4px;
    padding-right: 4px;
}

▍Расстояния в сеточных макетах — CSS Grid

А теперь — самое приятное! В макетах, основанных на CSS Grid, расстояния между элементами очень удобно настраивать, используя свойство grid-gap. Кроме того, можно не беспокоиться о ширине элементов и о нижних внешних границах. CSS Grid-макет берёт на себя заботы обо всём этом.

.grid--4 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 1rem;
}

Вот и всё. Полагаю, никто не станет спорить с тем, что настройка Grid-макетов легче и понятнее, чем настройка Flexbox-макетов.

▍Настройка расстояния между элементами только тогда, когда это необходимо

В Grid-макетах мне чрезвычайно нравится то, что свойство grid-gap применяется лишь в том случае, когда между элементами должно быть некое расстояние. Взглянем на следующий макет.

Макет сетки, в которой элементы в мобильной среде расположены вертикально, а в настольной — горизонтально

Есть раздел сайта с двумя карточками. Мне нужно, чтобы они были бы разделены и в мобильной среде, при вертикальном расположении карточек, и в настольной, при горизонтальном их расположении. Без CSS Grid такой гибкости макета достичь невозможно. Взгляните на следующий код:

.card:not(:last-child) {
    margin-bottom: 16px;
}

@media (min-width: 700px) {
    .card:not(:last-child) {
        margin-bottom: 0;
        margin-left: 1rem;
    }
}

Не очень-то удобно. Правда? А как насчёт следующего стиля?

.card-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 1rem;
}

@media (min-width: 700px) {
    .card-wrapper {
        grid-template-columns: 1fr 1fr;
    }
}

Дело сделано! И устроено всё значительно проще.

▍Работа с нижним внешним отступом

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

Набор компонентов, расположенных горизонтально

Обратите внимание на то, что нижний внешний отступ имеется и у последнего элемента. А это неправильно, так как отступы должны присутствовать лишь между элементами.

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

Решение №1: CSS-селектор : not

.element:not(:last-child) {
    margin-bottom: 16px;
}

Решение №2: комбинация соседних элементов одного уровня

.element + .element {
    margin-top: 16px;
}

Анализ решений

Хотя решение №1 кажется более привлекательным, у него есть следующие недостатки:

• Оно приводит к проблемам с CSS-специфичностью. Его нельзя переопределить до тех пор, пока используется селектор :not.
• Оно неприменимо в случаях, когда имеется более чем один столбец элементов. Это проиллюстрировано ниже.

Два столбца элементов и проблема решения №1

Если говорить о решении №2, то его применение не приводит к возникновению проблем со специфичностью. Правда, это решение тоже подходит лишь в тех случаях, когда речь идёт об одном столбце элементов.

В этой ситуации лучше всего прибегнуть к решению по удалению ненужного пространства путём добавления отрицательного внешнего отступа к родительскому элементу:

.wrapper {
    margin-bottom: -16px;
}

Здесь происходит следующее. Благодаря такой настройке элемент смещается вниз на расстояние, равное заданному внешнему отступу. Но тут следует проявлять осторожность и не задать такой внешний отступ при использовании которого элементы бы перекрылись.

▍Компонент-карточка

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

Компонент-карточка (если вам захотелось есть — извиняюсь)

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

Внутренние и внешние отступы

Вот разметка:

    
      

      

        
Cinnamon Rolls
        
Chef Ahmad
        
4.9
        

      
    

Вот стиль класса card__content:

.card__content {
    padding: 10px;
}

Благодаря установленному здесь внутреннему отступу будет настроено смещение для всех дочерних элементов. Затем настраиваем внешние отступы:

.card__title,
.card__author,
.card__rating {
  margin-bottom: 10px;
}

Настраивая разделение оценки и сведений, я использовал границу:

.card__meta {
    padding-top: 10px;
    border-top: 1px solid #e9e9e9;
}

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

Разделитель не привязан к краю

Вы, пожалуй, уже догадались о том, что нам тут помогут отрицательные отступы:

.card__meta {
    padding-top: 10px;
    border-top: 1px solid #e9e9e9;
    margin: 0 -10px;
}

Но и тут снова что-то пошло не так. Теперь текст прилип к краю карточки.

Разделитель в норме, но содержимое карточки расположено неправильно

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

.card__meta {
    padding: 10px 10px 0 10px;
    border-top: 1px solid #e9e9e9;
    margin: 0 -10px;
}

Карточка настроена так, как нужно

→ Вот пример

▍Содержимое статей

Я уверен в том, что то, о чём мы будем тут говорить, представляет собой очень и очень сильно распространённую ситуацию. Дело тут в том, что содержимое статей обычно поступает на страницы из CMS (Content Management System — система управления контентом), или генерируется автоматически на основе Markdown-файлов. Здесь нельзя указывать классы элементов.

Рассмотрим следующий пример, в котором представлена разметка, содержащая смесь из заголовков, абзацев и изображений.

  
Spacing Elements in CSS
  

  
Types of Spacing
  
  
 
  
 
  
Use Cases
  
 
  
▍Card Component
 
  

Для того чтобы привести это всё к приличному виду, расстояния между элементами должны быть единообразными и должны использоваться ответственно. Работая над данным примером я позаимствовал некоторые стили с type-scale.com.

h1, h2, h3, h4, h5 {
  margin: 2.75rem 0 1.05rem;
}

h1 {
  margin-top: 0;
}

img {
  margin-bottom: 0.5rem;
}

Вот схема страницы с текстом статьи.

Схема страницы и применение свойств margin-top и margin-bottom

Если за элементом

следует заголовок, например — заголовок Types of Spacing, то свойство margin-bottom элемента

будет проигнорировано. Это, как вы можете догадаться, является следствием схлопывания внешних отступов.

→ Вот пример

▍Внешние отступы, применяемые в зависимости от обстоятельств

Взгляните на следующий макет.

Элементы в нормальном состоянии и в ситуации нехватки места

Элементы не очень хорошо выглядят в том случае, когда они находятся друг к другу слишком близко. Я создал этот макет с использованием Flexbox. Эта методика называется «Alignment Shifting Wrapping» (Выравнивание Сдвиг Перенос). Я узнал о её названии отсюда.

.element {
    display: flex;
    flex-wrap: wrap;
}

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

Дочерние элементы находятся на новых строках

Здесь нужно разобраться с промежуточной ситуацией, в которой два элемента всё ещё находятся рядом друг с другом, но расстояние между ними равно нулю. В таком случае я предпочитаю прибегать к свойству margin-right, что не даёт элементам касаться друг друга и ускоряет срабатывание flex-wrap.

Элементы не касаются друг друга

▍CSS-свойство writing-mode

Сначала процитируем MDN: «Свойство writing-mode устанавливает горизонтальное или вертикальное положение текста, а также — направление блока».

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

Карточка с вертикальным заголовком

Вот стили:

.wrapper {
    /* Для того чтобы заголовок и карточка рецепта были бы расположены на одной строке */
    display: flex;
}

.title {
    writing-mode: vertical-lr;
    margin-right: 16px;
}

Заголовок повёрнут на 90 градусов. Между ним и изображением должно быть пустое пространство. Как оказалось, свойство margin-right отлично показывает себя при разных значениях свойства writing-mode.

→ Вот пример

Полагаю, мы рассмотрели достаточно сценариев использования отступов. Теперь рассмотрим некоторые интересные концепции.

Инкапсуляция компонентов

В больших дизайн-системах содержится множество компонентов. Логично ли будет настраивать их внешние отступы?

Рассмотрим следующий пример.

Кнопки

Save Changes
Discard

Где нужно настраивать расстояния между кнопками? Нужно ли настраивать какие-то свойства левой или правой кнопки? Может, можно воспользоваться комбинацией соседних элементов одного уровня?

.button + .button {
    margin-left: 1rem;
}

Ничего хорошего в этом нет. А что если имеется лишь одна кнопка? А как это будет работать на мобильном устройстве, в том случае, когда кнопки расположены по вертикали, а не по горизонтали? В общем, тут перед нами встаёт множество сложных вопросов.

▍Использование абстрагированных компонентов

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

Родительские и дочерние компоненты

    

        Save Changes
    
    

        Discard
    

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

.list {
    display: flex;
    align-items: center;
    margin-left: -1rem; /* Убирает левый внешний отступ первого элемента */
}

.list__item {
    margin-left: 1rem;
}

Вот и всё! И более того — эту концепцию легко применить к любому JavaScript-фреймворку. Например:

  Save Changes
  Discard

А используемый JS-инструмент должен поместить каждый элемент в собственную обёртку.

Компоненты, используемые в качестве разделителей

Если вы сомневаетесь в том, что прочли заголовок правильно — не сомневайтесь. Речь идёт о компонентах, используемых в качестве разделителей. В частности, тут я ссылаюсь на эту статью, в которой обсуждается концепция, в соответствии с которой избегают использования внешних отступов и применяют вместо них компоненты-разделители.

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

• Внешний отступ не должен настраиваться непосредственно у компонента, так как он является частью уже созданной дизайн-системы.
• Отступ должен быть гибким. На одной странице он может иметь размер X, а на другой — размер Y.

Я впервые заметил этот приём, исследуя новый дизайн Facebook.

Элемент-разделитель в дизайне Facebook

Здесь в качестве элемента-разделителя используется

  
  
  Beep
  Boop

  
  Beep
  Boop
  
  Boop

.element:after {
    content: "";
    display: block;
    height: 32px;
}

  
  Home
  About
  Contact

.wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: min(2vmax, 32px);
}