Как я могу устранить интервал между встроенными элементами в CSS?

У меня есть div с кучей тегов изображений внутри, вот пример:

<div style="margin: 0; padding: 0; border: 0;">
    <a href="/view/foo1"><img src="foo1.jpg" alt="Foo1" /></a>
    <a href="/view/foo2"><img src="foo2.jpg" alt="Foo2" /></a>
    <a href="/view/foo3"><img src="foo3.jpg" alt="Foo3" /></a>
</div>

Поскольку между тегами есть пробелы, браузеры будут отображать пробелы между изображениями (Chrome решает на 4px). Как я могу сказать браузеру, чтобы показать отсутствие пробелов между изображениями, не помещая > и < непосредственно рядом друг с другом? Я знаю, что расстояние между буквами применяется в дополнение к тому, что браузер решает использовать, так что бесполезно даже с отрицательным значением. В основном я собираюсь сделать что-то вроде Twitter в нижней части своей домашней страницы. Я просмотрел их код, и они используют неупорядоченный список. Я мог бы просто сделать это, но мне бы хотелось, чтобы техническое объяснение того, почему не существует способа устранить пустое пространство между этими изображениями.

Ответ 1

попробуйте добавить img {margin:0;padding:0;float:left}

другими словами, удалите по умолчанию margin и padding браузеров для img и float их.

Демо: http://jsfiddle.net/PZPbJ/

Ответ 2

Если вы по какой-то причине хотите это сделать:

без использования float s и;
не сворачивая пробелы в вашем HTML (это самое простое решение и для чего оно стоит, что делает Twitter)

Вы можете использовать это решение здесь:

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

Я немного уточнил это с тех пор.

Смотрите: http://jsfiddle.net/JVd7G/

letter-spacing: -1px - это исправление Safari.

div {
    font-size: 0;
    letter-spacing: -1px
}

<div style="margin: 0; padding: 0; border: 0;">
    <a href="/view/foo1"><img src="http://dummyimage.com/64x64/444/fff" alt="Foo1" /></a>
    <a href="/view/foo2"><img src="http://dummyimage.com/64x68/888/fff" alt="Foo2" /></a>
    <a href="/view/foo3"><img src="http://dummyimage.com/64x72/bbb/fff" alt="Foo3" /></a>
</div>

Ответ 3

Простейшее решение, которое не гасит с макетом и сохраняет форматирование кода:

<div style="margin: 0; padding: 0; border: 0;">
       <a href="/view/foo1"><img src="foo1.jpg" alt="Foo1" /></a><!--
    --><a href="/view/foo2"><img src="foo2.jpg" alt="Foo2" /></a><!--
    --><a href="/view/foo3"><img src="foo3.jpg" alt="Foo3" /></a>
</div>

Ответ 4

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

Строковые элементы отображаются в строке с текстом.

Ответ 5

Вы также можете сделать все якоря плавающими левыми и установить margin-left на -1

Ответ 6

Если вы обслуживаете свои страницы с помощью Apache, вы можете использовать модуль Google PageSpeed. У этого есть опции, которые вы можете использовать для сглаживания пробелов:

http://code.google.com/speed/page-speed/docs/filter-whitespace-collapse.html

Вам не нужно использовать более "опасные" параметры PageSpeed.

Также см. ответы в этом вопросе о том, как удалить пробелы в CSS:

Игнорировать пробелы в HTML

Ответ 7

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

Ответ 8

Добавьте style="display:block" в теги img.