Изображения бок о бок без какого-либо пространства между ними

У меня есть сетка изображений с пространством между ними. Как удалить это пространство?

Я уже пробовал установить padding и margin изображения на 0px, но он не сработал.

Любые идеи?

Ответ 1

Убедитесь, что в вашей разметке html нет пробелов. Итак, измените:

<img src="" alt="" /> <img src="" alt="" />

<img src="" alt="" /><img src="" alt="" />

Иногда пробелы также могут скрываться в конце новых строк, поэтому обязательно проверяйте конец строк, если ваш html выглядит как

<img src="" alt="" /> 
<img src="" alt="" />

Изменить

Вместо того, чтобы писать: <img src="imgs/img8.jpg" style="margin: 0; width: 300; height: 300;" /> 87 раз, просто поместите это в свой файл css:

div img { margin: 0;
    width: 300px;
    height: 300px;
}

а затем вы можете просто сделать свои изображения <img src="imgs/img8.jpg" alt="img8" />

Ответ 2

добавьте font-size:0px в div, тогда вы можете продолжать удерживать элементы img на отдельных строках кода

Ответ 3

Если вы используете float: left на изображениях и разделяете каждую строку с помощью выключателя с clear: both, между изображениями не должно быть пробелов.

Ответ 4

Параметры, необходимые для нуля, - это отступы, граница и маржа. На самих изображениях и в любом контейнере между ними.

Ответ 5

Попробуйте поместить два изображения в одну строку, например:

<img src="imgs/img0.jpg" style="margin: 0; width: 300; height: 300;" /><img src="imgs/img1.jpg" style="margin: 0; width: 300; height: 300;" />

и посмотрите, не изменит ли это что-либо. Я также предлагаю вам следовать советам об использовании CSS для упрощения всех стилей изображений. Потому что прямо сейчас вам нужно вручную изменить каждое значение вручную, если вы хотите изменить размеры изображений.

К сожалению, в HTML иногда возникают глупые проблемы с пробелом.