一些额外的高度像素 - 它们可能来自哪里？

Question

例如,这个链接:http://4ad.com/releases/20949,如果你看一下页面右上角的专辑封面图片,黑色边框不是很正方形:还有一些额外的像素底部的高度.

据我所知,图像尺寸为300x300像素.没有明显的(对我们来说)额外的4.5像素高度的来源.有谁知道可能造成这种差异的原因是什么？

Answer 1

由于图像是inline,它被视为文本,这意味着一些额外的像素被添加到底部作为前导.将图像显示为块(即添加display: block;)可以很好地解决问题.

或者,在img上使用`vertical-align:top`或`middle`或`bottom`.有关差异,请参见http://jsfiddle.net/Gu6pG/1/. (7认同)
是的,它确实!感谢您提供有效的解决方案,这也解释了问题的本质 - 正是我所需要的! (2认同)

Answer 2

默认情况下，图像显示为文本inline-block并与baseline文本对齐。为Descenders添加了额外的空间。

要修复它，使用vertical-align: top或middle或bottom在IMG。有关差异，请参阅http://jsfiddle.net/Gu6pG/3。