Используйте CSS для удаления пространства между изображениями

Дано:

<img src="..."/>
<img src="..."/>

В результате получается два изображения с одним пространством между ними. Кажется, что нормальное поведение состоит в том, чтобы показать любое количество пробелов, новых строк и вкладок в виде одного пробела. Я знаю, что могу сделать следующее:

<img src="..."/><img src="..."/>

ИЛИ

<img src="..."/><!--
--><img src="..."/>

ИЛИ

<img src="..."/
><img src="..."/>

Или любое количество других хаков. Есть ли способ удалить этот пробел с помощью CSS? например.

<div class="nospace">
    <img src="..."/>
    <img src="..."/>
</div>

Ответы

Ответ 1

Сделайте их display: block в своем CSS.

Ответ 2

Легкий способ, который почти полностью совместим, состоит в том, чтобы установить font-size: 0 в контейнер, если у вас нет каких-либо потоковых текстовых узлов, которые вам нужны для стилей (хотя это необходимо для переопределения там, где это необходимо).

.nospace {
   font-size: 0;
}

jsFiddle.

Вы также можете изменить значение по умолчанию display: inline на block или inline-block. Обязательно используйте обходные пути для <= IE7 (и, возможно, древних Firefox) для inline-block для работы.

Ответ 3

Я предпочитаю делать это

img { float: left; }

чтобы удалить пространство между изображениями

Ответ 4

Лучшее решение, которое я нашел для этого, состоит в том, чтобы содержать их в родительском div и давать этому div размер шрифта 0.

Ответ 5

Я обнаружил, что единственным вариантом, который работал у меня, был

font-size:0;

Я также использовал overflow и white-space: nowrap; float: left;, кажется, испортил вещи вверх