Question

开启，例如，此链接：http://4ad.com/releases/20949，如果您查看页面右上角的专辑封面图片，黑色边框不是很正方形：还有一些额外的高度像素底部。

据我所知，图像尺寸为300x300像素。没有明显（对我们来说）额外4.5像素高度的来源。有谁知道可能会造成这种差异？

Answer 1

由于图像为inline，因此将其视为文本，这意味着将一些额外的像素添加到底部作为前导。将图像显示为块（即添加display: block;）可以很好地解决问题。

Answer 2

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

要解决此问题，请在img上使用vertical-align: top或middle或bottom。有关差异，请参阅http://jsfiddle.net/Gu6pG/3。

Answer 3

将此设置添加到 style.css 文件中，将图片更改为块元素：

/* consolidate this CSS style */
#rightbox_packshot img {
    width: 300px; /* from line 2896 in style.css */
    height: 300px; /* from line 1498 in style.css */
    display: block;
}

Answer 4

或者您可以使用float:left（或右侧）代替display:block，这会使图片成为block元素，但允许您保留其他文本（如果有）内联

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

4 个答案: