Пробел между картинками

[Vlad]

Есть две картинки, нам надо их разместить вертикально одна под другой. Ничего сложного, используем следующий код.

<p><img src="sample.gif" alt="1"><br>

<img src="sample.gif" alt="2"></p>

Так вот, при строгом доктайпе между картинками будет промежуток, при переходном доктайпе промежутка не будет. Проверял в Opera 9.2, Safari 3.1, FF 2. Один IE6 игнорирует доктайп и отображает без пробелов в любом случае.

Никак не могу понять логику, при чем же здесь доктайп, однозначно влияет на line-height, которое меняется. Хотя казалось бы не должно. У кого какие соображения?

[rash]

Соображения таковы:

Изображения

Изображение — строчный элемент. Если изображение находится в тексте, то по вертикали оно отображается на уровне т. н. базовой линии шрифта, находящейся выше нижней границы строки.

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

Согласно стандартам, изображение должно выравниваться по базовой линии текстовой строки и всегда иметь отступ снизу.

Полагаю, что в quirks mode просто игнорируется выравнивание изображений по базовой линии, и выравнивает их по низу, тем самым упрощая "стыковку" изображений.

Предположение, конечно.

[hmelii]

Проставь для тэга p line-height:0; font-size:0;

Или для img задай display:block;

Посетить мою домашнюю страницу

Edited October 4, 2008 by hmelii

[Vlad]

Решение мне известно, меня интересовало, почему влияет доктайп на отображение рисунков.