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

этот вопрос уже есть ответ здесь:

  • Как удалить пространство между элементами встроенного блока? 35 ответов

дано:

<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>
5 72
html css

5 ответов:

сделать их display: block в вашем CSS.

96

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

.nospace {
   font-size: 0;
}

jsFiddle.

вы также можете изменить значение по умолчанию display: inline на block или inline-block. Будьте уверены, чтобы использовать требуются обходные пути для inline-block to работа.

72

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

11

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

img { float: left; }

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

10

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

font-size:0;

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

6