Ответ
При использовании display: flex у родительского контейнера, между inline-элементами (включая <img>) могут появляться пробелы из-за отступов в HTML. Вот как это исправить:
- Удалить пробелы и переносы строк между тегами картинок в HTML:
<div class="gallery">
<img src="1.jpg"><img src="2.jpg"><img src="3.jpg">
</div>- Или использовать CSS-свойство
font-size: 0у родителя:
.gallery {
display: flex;
font-size: 0; /* убирает пробелы */
}
.gallery img {
font-size: 16px; /* восстанавливаем размер шрифта для дочерних элементов */
}- Альтернативный вариант - отрицательный margin:
.gallery {
display: flex;
gap: 0; /* если используется gap */
}
.gallery img {
margin-right: -4px; /* компенсирует пробелы */
}Первый способ наиболее надежный, но может ухудшить читаемость HTML. Второй вариант более чистый, но требует восстановления font-size для дочерних элементов.
Ответ 18+ 🔞
Ну, слушай, вот сидишь ты такой, верстаешь себе спокойно, display: flex накинул на родителя, а между картинками — хуй! — пробелы торчат, как будто их там нарочно воткнули, сука!
А вся соль в том, что браузер эти переносы строк и пробелы в HTML-коде за родные отступы считает, вот и вылезает эта ебаная щель между <img>.
Ну, ладно, не кипишуй, есть варианты, как эту хитрую жопу починить.
Вариант первый — тупой, но работает.
Просто в HTML все картинки вплотную друг к другу пилишь, без пробелов и переносов. Читать, конечно, будет нихуя неудобно, но браузеру похуй.
<div class="gallery">
<img src="1.jpg"><img src="2.jpg"><img src="3.jpg">
</div>Вариант второй — похитрее, через CSS.
Родителю даёшь font-size: 0, и все эти невидимые пробельные символы схлопываются в ноль. Но потом детям (картинкам) надо размер шрифта вернуть, а то они, блядь, текст внутри (если вдруг) отобразят точками.
.gallery {
display: flex;
font-size: 0; /* вот тут пробелы накрываются медным тазом */
}
.gallery img {
font-size: 16px; /* а тут возвращаем, если надо */
}Вариант третий — костыльный, но тоже живой.
Можно попробовать отрицательным margin'ом отодвинуть картинки друг к другу. Но это, конечно, чистое шаманство, и если у тебя там gap стоит, то вообще пиздец.
.gallery {
display: flex;
gap: 0;
}
.gallery img {
margin-right: -4px; /* подбирай на глаз, ебаный в рот */
}Короче, первый способ — надёжный, но HTML превращается в кашу. Второй — почище, но надо не забыть шрифт вернуть. Выбирай, что душе угодно, главное — пробелы эти ебучие убери, а то смотришь и волнение ебать!