XHTML 1.0 Strict 中图像下方不需要的间距答案

【问题标题】：Unwanted spacing below images in XHTML 1.0 StrictXHTML 1.0 Strict 中图像下方不需要的间距
【发布时间】：2010-10-31 04:39:07
【问题描述】：

我的目标是为我正在处理的这个页面使用 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 的同时避免这个问题的方法吗？

感谢您的宝贵时间！

【问题讨论】：

【解决方案1】：

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

如果图像是内联显示的，它会在其下方留出少许空间。这是因为图像放置在文本的基线上，在基线下方应该有更多的空间用于下行字符，如 g、j 或 q。

分支是，在严格模式下，不可能使容器紧紧地围绕图像，除非你明确地说 img {display: block}。

另一个主要选择是保持图像内联并改变图像相对于行框的垂直对齐方式。例如，您可以尝试以下操作：
div img {vertical-align: bottom;}

【讨论】：

【解决方案2】：

试试这个

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

【讨论】：