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