Как сохранять одинаковый воздух сверху и снизу?

Question

[Alibek Kulseitov]

Вопрос сформулирован немного не правильно но сейчас попытаюсь объяснить. В вопросе нету ничего сложного, просто хочу услышать Ваши советы и перенять Ваш опыт.

Постоянно сталкиваюсь с проблемой одинакового воздуха сверху и снизу.
Например: каждая секция имеет padding: 2rem и как обычно/часто бывает идут элементы в ряд в 2-3 строки...
и чтобы элементы не прилипали друг к другу я обычно добавлю margin-bottom: 1rem ну не я один так делаю думаю))
Теперь проблема: последний ряд элементов ниже себя дает тот самый margin и получается что в секции воздух сверху и снизу не равномерный. Снизу больше из-за margin у элементов.
Как вы решаете такой момент?


ПРИДУМАЛ РЕШЕНИЕ:

// vertical gutter
.vertical-gutter[vertical-gutter="10"] {
    margin-top: -5px;
    margin-bottom: -5px;
}

.vertical-gutter[vertical-gutter="15"] {
     margin-top: -7.5px;
     margin-bottom: -7.5px;
}

.vertical-gutter[vertical-gutter="20"] {
    margin-top: -10px;
    margin-bottom: -10px;
}

.vertical-gutter[vertical-gutter="25"] {
    margin-top: -12.5px;
    margin-bottom: -12.5px;
}

.vertical-gutter[vertical-gutter="30"] {
    margin-top: -15px;
    margin-bottom: -15px;
}

.vertical-gutter[vertical-gutter="60"] {
    margin-top: -30px;
    margin-bottom: -30px;
}

Answer 1

[Anton Filippov]

ну уменьшите нижний паддинг до 1 rem у враппера (надо заменить padding: 2rem; на padding: 2rem 2rem 1rem;)

Answer 2

[Odisseya]

Для текстовых блоков я держу вертикальный ритм за счет единообразных margin для заголовков и разделителей (в вашем примере, условным разделителем служит дата/время), например:
Так, у любого блока новости margin-bottom: 0, а вот у заголовка он есть.
Для крупных сеток или интерфейсных блочков подход несколько другой.

Answer 3

[Froggyweb]

отрицательный margin для таких секций? по-моему норм.

Comments

[Alibek Kulseitov]

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