Встречается на собеседованиях • сегодня
Как убрать пробелы между картинками при помощи 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` для дочерних элементов.


```
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` для дочерних элементов.
Софи собрала все вопросы. Тренируйся и получай
офферы быстрее!
офферы быстрее!
Попробовать бесплатно
Следующий вопрос
Это единственный вопрос по вашему фильтру
как отвечать на вопрос
пример собеседования
фреймворки на собеседовании
типичные вопросы junior
интервью вопросы и ответы