Откуда этот разрыв и как от него избавиться?

Question

Простой код:

<a href="#">
    <div>
        <img src="http://dummyimage.com/600x400/000/fff&text=image" class="image" />
        <img src="http://dummyimage.com/600x15/000/fff" alt="" class="shadow" />
    </div>
</a>

Два изображения имеют отступы и отступы 0, но между ними все еще есть зазор.

Как избежать такого поведения?

И ДА, это не ошибка, все должно быть в теге.

Пример:

http://jsfiddle.net/fqrfU/

Answer 1

Я считаю, что проблема заключается в высоте строки. Проверьте это .

В другой заметке, я знаю, что вы сказали, что это так, но на самом деле недопустимо (?) HTML иметь тег div внутриякорь.Попробуйте использовать span s вместо.

Answer 2

Два изображения отображаются в строке. Это означает, что базовая линия изображения выровнена с базовой линией текста. Ниже текста обычно есть больше места для учета букв типа pjgq, которые идут ниже базовой линии.

Простое создание изображений display: block; разрешает это в вашем сценарии.

Эта страница достаточно ясно описывает вашу ситуацию: http://devedge -temp.mozilla.org / viewsource / 2002 / img-table /

Answer 3

добавить в оба display:block;

Демо: http://jsfiddle.net/fqrfU/22/

Answer 4

Что сказал Богдан или:

<div> <img src="http://dummyimage.com/600x400/000/fff&text=image" class="image" /><img src="http://dummyimage.com/600x15/000/fff" alt="" class="shadow" /> </div> </a>

Видите, пробел между /> и вторым <img фактически отображается, что дает пространство между двумя изображениями.

- Пит

Answer 5

Просто твой CSS,

.image, .shadow {
    margin: 0;
    padding: 0;
    display:block;
}

http://jsfiddle.net/fqrfU/43/

Answer 6

Это сработало для меня только сейчас:

img
{  
    display: block;
}

Answer 7

У вас есть проблемы в IE? Попробуйте поместить оба тега изображений в одну строку в HTML, без пробелов между ними ...

Answer 8

<a href="#">
    <div>
        <img src="http://dummyimage.com/600x400/000/fff&text=image" class="image" /><img src="http://dummyimage.com/600x15/000/fff" alt="" class="shadow" />
    </div>
</a>

Answer 9

Вы можете плавать и очистить их:

img {
    clear: both;
    float: left;
}

http://jsfiddle.net/lukemartin/fqrfU/11/