Почему пропадает отступ между картинками при использовании flex

Flexbox по умолчанию устанавливает align-items: stretch, что растягивает элементы по высоте контейнера. Если у картинок нет фиксированной высоты, они могут "прилипать" друг к другу, теряя отступы.

Также flex-контейнер игнорирует пробелы и переносы строк в HTML, которые обычно создают отступы между inline-элементами.

Решение:

1. Явно задать gap для flex-контейнера:

.container {
  display: flex;
  gap: 20px; /* добавляет отступы */
}

2. Использовать margin для картинок:

img {
  margin-right: 20px;
}
img:last-child {
  margin-right: 0;
}

3. Если нужно сохранить inline-поведение, лучше использовать display: inline-block вместо flex.