Встречается на собеседованиях • сегодня

Как убрать пробелы между картинками при помощи flex

При использовании `display: flex` у родительского контейнера, между inline-элементами (включая ``) могут появляться пробелы из-за отступов в HTML. Вот как это исправить: 1. Удалить пробелы и переносы строк между тегами картинок в HTML: ```html ``` 2. Или использовать CSS-свойство `font-size: 0` у родителя: ```css .gallery { display: flex; font-size: 0; /* убирает пробелы */ } .gallery img { font-size: 16px; /* восстанавливаем размер шрифта для дочерних элементов */ } ``` 3. Альтернативный вариант - отрицательный margin: ```css .gallery { display: flex; gap: 0; /* если используется gap */ } .gallery img { margin-right: -4px; /* компенсирует пробелы */ } ``` Первый способ наиболее надежный, но может ухудшить читаемость HTML. Второй вариант более чистый, но требует восстановления `font-size` для дочерних элементов.
Sophi
Софи собрала все вопросы. Тренируйся и получай
офферы быстрее!
Попробовать бесплатноArrow

Следующий вопрос

Это единственный вопрос по вашему фильтру

как отвечать на вопрос
пример собеседования
фреймворки на собеседовании
типичные вопросы junior
интервью вопросы и ответы