Нежелательный интервал под изображениями в XHTML 1.0 Strict

Question

Моя цель - использовать XHTML 1.0 Strict DOCTYPE для этой страницы, над которой я работаю, но у меня возникают странные проблемы с дизайном.

У меня есть следующий код:

<div><img src="photos/someimage.jpg" alt="Title" /></div>

Когда я загружаю страницу с DOCTYPE, установленным на 1.0 Strict, под изображением, внутри div, добавляется небольшой пробел. Я удалил все пробелы / разрывы строк в коде, что, как представляется, является обычной причиной такого рода проблем. Если я изменю DOCTYPE на 1.0 Transitional, интервал исчезнет, ​​и страница будет выглядеть так, как должна.

Кто-нибудь знает способ избежать этой проблемы при использовании 1.0 Strict?

Спасибо за ваше время!

Answer 1

http://www.schoonzie.com/rogue-padding-below-images

Если изображение отображается встроенным, оно оставляет небольшое пространство под ним. Это связано с тем, что изображение размещается на базовой линии текста, а под базовой линией должно быть больше места для символов спуска, таких как g, j или q.

Ответвление заключается в том, что в строгом режиме невозможно плотно подогнать контейнер вокруг изображения, если, конечно, вы явно не скажете img {display: block}.

https://developer.mozilla.org/en/images,_tables,_and_mysterious_gaps

Другой основной выбор - оставить изображение встроенным и изменить вертикальное выравнивание изображения относительно линейного блока. Например, вы можете попробовать следующее:

div img {vertical-align: bottom;}

Answer 2

Попробуйте это

<div style="font-size: 0px;"><img src="photos/someimage.jpg" alt="Title" /></div>