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

Заголовок карточки размечен тегом <h3>, а описание — тегом <p>. Каждому из них браузер добавляет внешние отступы по вертикали, которые не совпадают с теми, что нарисовал дизайнер. Эти отступы придётся переопределить.

Лайм

Добавит кислинку и уникальный аромат.

+ Добавить

Лайм

Добавит кислинку и уникальный аромат.

+ Добавить

Задавая внешние отступы, следует помнить, что у соседних флекс-элементов они складываются.

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

Если элементы выстроены вертикально, то отступ добавляют снизу. Исключение — самый последний элемент (например, подвал страницы), ему при необходимости задают отступ сверху:

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

Элементы в карточках выстроены сверху вниз. Поэтому мы добавим отступы снизу всем элементам, кроме ссылки, и обнулим верхние отступы по умолчанию у заголовка и абзаца. Ссылка — последний элемент, поэтому ей зададим внешний отступ сверху.

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