it-roy-ru.com

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

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

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

Есть идеи?

16
costi

Убедитесь, что у вас нет пробелов в 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" />

30
JakeParis

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

18
Yaary

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

2
Refugee

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

<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 иногда возникают глупые проблемы с пробелами.

0
Hanna

Параметры, которые вам нужно обнулить, это padding, border и margin. На самих изображениях и любых контейнерах между ними.

0
Javier