html5垂直间距问题与<img>
我正在尝试创建一个布局，其中div之间的垂直间距为像素完美。 到目前为止，我已经排除了几乎所有的大型网格系统（960.gs，Blueprint），因为它们在垂直间距方面根本没有解决方案。 有了它们，设置div之间的垂直间距的唯一方法就是使用body {line-height}属性并使用它来操作div间距。 我不会称之为解决方案，因为它会毁坏您的模板，取决于font-family，并且不会让您为不同的div使用不同的间距。
我发现唯一一个对垂直间距有适当支持的网格系统是Golden Grid，它不使用body {line-height}，但是它有自己的.clear {height：5px}用于垂直间距。
我的问题是，无论我如何尝试，我都无法在HTML5中使间距工作。 我正在谈论垂直排列的图像，它们之间没有间隙。 在XHTML过渡模式下，一切正常，图像完美对齐，但在HTML5模式下，它们之间存在垂直差距。 Chrome浏览器的差距为2px，Firefox浏览器的差距为2-3px，两行之间交替。 我认为在HTML5模式下使用每个网格系统都是这种情况。 我不知道在纯HTML5中编写代码的最佳方式是什么，所以我只是尝试了网格系统。 纵向差距也存在于960.gs，Blueprint中。
我找到的解决方案可能是设置body {line-height：0}并在每个印刷标签中定义行高。 但我不明白，为什么这样一个简单的案例需要这样的黑客攻击：垂直排列的图像。 为什么浏览器在HTML5模式下与XHTML Transitional模式不同？
在这里，我有相同的页面，没有什么改变，只是文档类型。 XHTML在每个浏览器中都是像素完美的，HTML5则有差距，并且不同于浏览器。
使HTML5示例像XHTML过渡工具一样工作的最佳方式是什么？
更新 ：三十多岁的回答了这个问题，如果我包括img {display：block; } HTML5版本的行为与XHTML Transitional完全相同。 谢谢你，三十！
但在关闭此线程之前，有人可以向我解释为什么：
为什么所有浏览器在HTML5模式下行为都不同，并且在未指定为display：block时，所有浏览器在img元素之间都有不同的垂直间距？
首先，浏览器没有“HTML5模式”。 他们有三种模式：“怪癖”，“有限的怪癖”（又名几乎标准）和“标准”模式。 “有限怪异”和“标准”模式之间只有一个区别，并且与<img>所在线框的线高和基线建立方式有关。 在“有限怪异”模式下，如果线上没有渲染的文本内容，则不会建立基线，并且<img>位于线框底部。
在“标准”模式下，即使在该线框中没有真正的字符，线框始终包含字符的下移字符（如g，p和y）的空间。您看到的间隙是基线和行箱的底部，这是下行者的空间。 有关详细说明，请参阅http://msdn.microsoft.com/en-us/library/ff405794%28v=vs.85%29
那么，补救措施是要阻止<img>被视为内联元素{ display:block; } { display:block; }或者覆盖<img> { vertical-align:bottom; } { vertical-align:bottom; } 。 要么会工作。
为什么XHTML Transitional不需要这种破解
使用XHTML Transitional doctype将浏览器置于“有限怪癖”模式。 如果您使用了XHTML Strict或完整的HTML4严格文档类型，那么您将看到与HTML5文档类型相同的差距，因为它们都将浏览器置于“标准”模式。
为什么XHTML Strict也会产生垂直差距
往上看。
使用img {display：block; }在reset.css工作表中？
当然，但是可能有些时候你会想把<img>当作内联元素。 在这些情况下，您需要在相应的位置添加CSS来实现此目的。
我觉得这不能成为你正在寻找的答案。 太短了：
添加到您的HTML5页面的CSS： img { display: block } 。
在Firefox和Chrome中进行测试，这样可以在两个页面之间获得像素完全相同的渲染效果。
vertical-align: baseline会导致图像底部的间隙。
在严格的文档类型中，图像是内联元素，其行为与文本类似。 即使没有任何文本，将基线上的内联元素对齐也会导致它们为文本下划线留出空间。
将img { vertical-align: bottom }到您的重置样式表中可以解决问题。