Коротко: расстояние между кнопками задают свойством gap у flex/grid-контейнера — это самый современный способ. Альтернативы: margin у кнопок с обнулением крайних, justify-content: space-between для «по краям» и gap с flex-wrap для переноса. Ниже — как выбрать и не наделать «двойных» отступов.
Вкладки: 4 способа расставить зазор
.actions {
display: flex;
gap: 12px; /* и по строке, и при переносе */
flex-wrap: wrap;
}Лучший способ: gap не добавляет отступов снаружи группы и корректно работает при переносе строк. Ничего «обнулять» не нужно.
.btn { margin-right: 12px; }
.actions .btn:last-child { margin-right: 0; }Классический способ. Важно убирать отступ у последней кнопки, иначе группа «съедет» влево или появится лишний сдвиг при выравнивании по центру.
.btn + .btn { margin-left: 12px; }Селектор «сосед» добавляет отступ только между кнопками, без «крайних». Чисто и без :last-child. Работает, когда кнопки — соседние элементы.
.toolbar {
display: flex;
justify-content: space-between;
}Если нужно раскидать кнопки «по краям» блока. Промежуток не задаётся, он вычисляется автоматически. Для ровного зазора с фиксированными отступами лучше flex + gap.
gap и «сосед» ведут себя правильно (нет лишнего отступа), а margin на всех кнопках — нет. Поэтому gap предпочтительнее.Вертикальный зазор и перенос
.actions {
display: flex;
flex-wrap: wrap;
gap: 12px 8px; /* 12px по вертикали, 8px по горизонтали */
}gap умеет два значения: строка и столбец. При переносе кнопок на новую строку вертикальный интервал берётся из первого числа.
Практика: три случая
- Две кнопки рядом: flex +
gap: 12px. - Кнопка на всю ширину на мобильном: у кнопки
flex: 1 1 100%в медиа-запросе. - Группа по центру: родителю
justify-content: center+gap.
Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Двойной отступ | gap + margin одновременно | оставить что-то одно |
| Кнопки «прилипли» | gap не поддерживается или не задан | проверить display: flex |
| Лишний сдвиг справа | margin у последней кнопки | :last-child { margin: 0 } |
| Неровно при переносе | margin без учёта строк | перейти на gap |
Проверьте себя
Вопросы и ответы
В многострочных контейнерах (колоночная вёрстка) местами да, но надёжнее использовать gap именно во flex или grid.
Задайте gap: 16px 0 — 16px по вертикали (между строками), 0 по горизонтали. Или наоборот, по задаче.
Из-за разного текста и padding. Задайте общий min-height и align-items: center у контейнера.
Сделайте контейнер flex и задайте кнопкам flex: 1 — они разделят ширину поровну с учётом gap.
Итоги
- Основной способ —
gapу flex/grid-контейнера. marginтребует обнуления у крайних элементов.- Селектор
.btn + .btnдаёт отступ только между кнопками. - Не сочетайте gap и margin — получите двойной зазор.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.