CSS显示：阻止问题

Question

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

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

提前致谢

Answer 1

如果没有display: block，span仍然是内联元素。额外的4个像素的高度来自descenders字母留下的空间。观察：如果您更改font-size，the amount of extra height also changes。

如果您不想指定display: block，you could set vertical-align: top，则与默认的vertical-align: baseline不同。