html - 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

If an image is displayed inline, it leaves a slight space below it. This is because the image is placed on the baseline of the text, and below the baseline there should be some more space for the descender characters like g, j or q.

The offshoot is that in strict mode it's not possible to make a container fit tightly around the image, unless, of course, you explicitly say img {display: block}.

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

The other main choice is leave the image inline and alter the vertical alignment of the image with respect to the line box. For example, you could try the following:

div img {vertical-align: bottom;}