css - CSS显示：阻止问题

Question

我们有以下代码：http: //jsfiddle.net/DVwmJ/

如您所见，绿线在红线之后 4px（我们不希望这样）。任何人都知道为什么如果我取消注释 span 元素的“display:block”css 声明，这些行会重叠（如预期的那样）？

提前致谢

Answer 1

没有display: block，span仍然是一个内联元素。额外的 4 个像素的高度来自于为字母降序留出的空间。一个观察：如果你改变font-size，额外高度的量也会改变。

如果你不想指定display: block，你可以设置vertical-align: top，这与默认的不同vertical-align: baseline。