当我切换到 XHTML Strict DOCTYPE 时，我的图像间距出现问题。
以下代码 - 使用 Yahoo 的重置样式表来消除所有默认的浏览器填充 - 在下面的两个图像之间留下大约 4 像素的间隙，但仅当我使用严格的文档类型时。这是为什么？
这只是 Chrome 和 Firefox 中的一个问题。 IE 不显示两个图像之间的单个像素。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css"
href="http://yui.yahooapis.com/2.6.0/build/reset/reset-min.css">
</head>
<body>
<div><img src="http://www.catfacts.org/cat-facts.jpg" border="0"/></div>
<div><img src="http://www.catfacts.org/cat-facts.jpg" border="0"/></div>
</body>
</html>
最佳答案
以 Peter 的回答作为开始，以下解决了问题:
img { vertical-align: bottom }
之所以可行，是因为 vertical-align 的默认值是 baseline，它相当于悬空位悬卡在“在线上方”的文本部分向下(小写的 g、q 等都低于该基线)。
因此，为了留出空间，它为这些悬垂物留出了 4px 的空间。
希望这是有道理的。
编辑:来自 source site 的视觉辅助
(来源:brightlemon.com)
关于css - 影响图像间距的严格 DOCTYPE，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/489974/