Таинственное дополнение/маржа появляется после изображения в строгом режиме

Я создал новый документ как с xhtml 1.0, так и html 4.01 STRICT, чтобы изолировать это. Все, что у меня есть в теле:

<div style="border: blue 3px solid;">
<img src="testimage.jpg" width="800" height="400">
</div>

Результат нормальный, кроме 5px-пространства ниже изображения, которое исчезает, если я изменю doctype на переходный. Он также исчезает, если я устанавливаю отображение: блокировать изображение.

Вы можете увидеть результат самостоятельно (я знаю, что пробел справа нормальный, так как его элемент блока): http://i52.tinypic.com/2prd1jd.jpg

Я попробовал установить margin/padding на 0, даже это:

*
{
   margin: 0; padding: 0;
}

но он все тот же.

Может кто-нибудь объяснить это поведение?

Ответ 1

Это связано с вертикальным выравниванием изображения. Попробуйте следующее:

img{
 vertical-align: top;   
}

и пространство исчезнет.

Чтобы прояснить, если вы поместите некоторый текст рядом с изображением, вы увидите проблему. Изображение выравнивается с базой текста, но буквы типа y и g будут идти ниже этой строки. Дополнительное пространство для этих нависающих букв.

Ответ 2

Это потому, что, как уже упоминалось @Pawel, "по умолчанию изображение отображается в строке". Поскольку это "inline", некоторые пробелы ниже будут указаны для символов типа "g, j, q, y" и т.д.

Изображение от: https://developer.mozilla.org/en-US/docs/Images,_Tables,_and_Mysterious_Gaps.

Итак, другое решение просто задает изображение как блок:

img {
  display:block;
}

Пример: https://gist.github.com/MrCoder/450783bc33d6b412075d