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

Question

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

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

Результат нормальный, за исключением того, что под изображением остается пространство в 5px, которое исчезает, если я изменяю тип документа на переходный.Это также исчезнет, ​​если я установлю display: block на изображение.

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

Я попытался установить значение margin / padding в 0, даже это:

*
{
   margin: 0; padding: 0;
}

, но оно все равно.

Может кто-нибудь объяснить, пожалуйста, такое поведение?

Answer 1

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

img{
 vertical-align: top;   
}

и пространство уйдет.

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

Answer 2

Это потому, что, как упоминало @Pawel, «по умолчанию изображение отображается встроенным». Поскольку он «встроенный», некоторые пробелы ниже будут даны для символов, таких как «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