Как сделать расстояние между картинками css

Чтобы создать расстояние между изображениями с помощью CSS, вы можете использовать свойство margin. Это свойство позволяет задавать отступы вокруг элемента.

Например, если у вас есть несколько изображений, которые должны быть выровнены в строку, но с небольшим расстоянием между ними, вы можете использовать следующий CSS-код:

img {
  margin-right: 10px;
}

Здесь мы устанавливаем отступ справа от каждого изображения в 10 пикселей с помощью свойства margin-right. Таким образом, каждое изображение будет иметь небольшое расстояние между собой.

Вы также можете использовать свойства margin-top, margin-bottom и margin-left, чтобы установить отступы сверху, снизу и слева от изображений соответственно. Чтобы задать одинаковый отступ вокруг всех сторон изображения, вы можете использовать свойство margin с единственным значением, например:

img {
  margin: 10px;
}

Этот код установит отступ в 10 пикселей для всех сторон каждого изображения.

Расстояние между картинками проще всего задать свойством gap у контейнера:

<div class="gallery">
  <img src="1.jpg" alt="">
  <img src="2.jpg" alt="">
  <img src="3.jpg" alt="">
</div>

gap ставит отступ только между картинками, у краёв контейнера отступа нет.

Сетка картинок

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.gallery img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

Три колонки одинаковой ширины, отступ 16px и по горизонтали, и по вертикали. Адаптивная сетка без медиазапросов: grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)).

Через margin

Если контейнера нет:

img + img {
  margin-left: 16px;
}

Отступ получит каждая картинка, кроме первой.

Лишний промежуток под картинкой или между ними

<img> по умолчанию строчный элемент. Поэтому:

• под картинкой остаётся полоска в несколько пикселей — место под нижние выносные элементы букв;
• пробелы и переносы строк между тегами <img> в HTML превращаются в промежуток около 4px.

Оба эффекта убирает display: block у картинок или display: flex у контейнера:

.gallery img {
  display: block;
}

Разные отступы

gap: 24px 8px — 24px между рядами и 8px между колонками.

Flexbox и Grid разбирают в курсе «Профессиональная вёрстка».