Вот мой html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<div style="border:1px solid red; float:left; padding:0;">
<img src="xxx.jpg">
</div>
Я не знаю, почему div содержит некоторые padding-bottom, даже я установил padding: 0.
Если я удалю DOCTYPE, эта проблема не возникнет. Существуют ли другие способы решения этой проблемы без удаления DOCTYPE?
img { display:block; }
или
img { vertical-align:bottom; }
будет работать. Поскольку изображения встроены, а текст является встроенным, пользовательские агенты оставляют некоторое пространство для символов descender (y, q, g). Чтобы отключить этот эффект для изображений, вы можете указать один из стилей выше, хотя вы можете сделать правила более конкретными, чтобы не настроить таргетинг на изображение, на которое вы не хотите, чтобы оно было применено.
Демо: http://jsbin.com/obuxu
Другой альтернативный вариант, как другой плакат, указывал бы на то, что для родительского элемента установить высоту строки равную 0.
Техническое объяснение: https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps
Установите высоту строки: 0; в стиле div:
<div style="border:1px solid red; float:left; padding:0; line-height:0;">
<img src="xxx.jpg" />
</div>
img - встроенный элемент, поэтому он сохраняет место для символов с помощью descenders. Регулировка высоты строки в div устраняет проблему. При желании вы также можете изменить img для отображения в виде элемента блока.
Вполне возможно, что то, что вы считаете нижним дополнением на div, на самом деле вызвано другим правилом стиля - например, добавлением элемента body, что возможно, если вы включите/отключите режим quirks браузера (играете с DOCTYPE имеет тенденцию иметь такой эффект).
Если это так, должно быть возможно переопределить стиль по умолчанию с помощью настраиваемого правила стиля.
Firebug может быть полезной здесь, поскольку он показывает, какие стили CSS влияют на какой элемент DOM.