Коротко: отступ между картинками делают либо отступами (margin), либо зазором контейнера (gap). Для галереи в ряд почти всегда лучше gap — ровно и без «двойных» полей по краям.
Как выбрать способ
| Ситуация | Лучший способ |
|---|---|
| Картинки в ряд в контейнере | flex или grid + gap |
| Сетка (плитка) | grid + gap |
| Отдельные картинки в тексте | margin |
| Картинки «в строку» (inline) | убрать пробелы или перейти на flex |
Ключевое преимущество gap: он добавляет отступы только между элементами и не создаёт поля по краям контейнера.
Вкладки: три способа с кодом
.gallery {
display: flex;
flex-wrap: wrap;
gap: 16px; /* горизонталь и вертикаль одинаково */
}
.gallery img { display: block; }Если нужны разные отступы по осям: gap: 8px 16px; (вертикаль / горизонталь).
.gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}Сетка сама держит равные колонки; gap делает ровные «коридоры» между плитками.
img { margin: 0 8px 16px 0; } /* справа и снизу */Минус: у последнего элемента справа тоже будет отступ — «двойное» поле у края. Иногда его убирают селектором :last-child.
Практика: три частые задачи
1. Галерея из 3 колонок
- Контейнеру задайте
display: grid. - Колонки:
grid-template-columns: repeat(3, 1fr). - Отступ:
gap: 16px. - Картинкам —
width:100%; height:auto; display:block.
2. Картинки «в строку» в тексте
.inline-gallery { font-size: 0; } /* убирает пробелы между inline-картинками */
.inline-gallery img { margin: 0 8px; font-size: 16px; }Если можно — лучше перейти на flex и не бороться с пробелами.
3. Разный отступ по осям
.gallery { gap: 8px 20px; } /* 8px по вертикали, 20px по горизонтали */gap не будет эффекта, если у контейнера нет display: flex или grid. Многие ставят gap обычному блоку — и удивляются, что «ничего не меняется».Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
gap не работает |
контейнер не flex/grid | добавить display:flex/grid |
| Отступ по краям «двойной» | у всех картинок margin |
использовать gap или снять у :last-child |
| Пробелы между картинками | inline-разметка | font-size:0 или flex |
| На телефоне картинки выходят за экран | фиксированная ширина | max-width:100%; height:auto |
Проверьте себя
gap заработал?
Вопросы и ответы
Либо перейти на flex/grid, либо обнулить font-size у контейнера и вернуть его картинкам.
gap: 8px 20px — первое значение вертикаль, второе горизонталь.
Из-за margin у всех элементов. Используйте gap или снимите отступ у :last-child.
Задайте одинаковое aspect-ratio и object-fit: cover — карточки станут ровными.
Итоги
- В ряд —
flex/grid+gap. - Отдельные картинки —
margin. - Картинкам —
display:block,max-width:100%. - Проверяйте отступы по краям и на телефоне.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.