CSS：如何摆脱一些无法解释的空间/填充？

Question

在这个例子中：

http://jsfiddle.net/trusktr/g5sa5/

你看到每行图像之间有一个白色的间距。你怎么在世界上摆脱它

Answer 1

至少有两种解决方案。只需将以下其中一行添加到.box_thumb_img - 样式：

即可

vertical-align: bottom;

或

display: block;

说明：默认情况下，浏览器将图像视为内联元素。它将图像放在与文本基线（见下图）相同的高度（是的，在您的页面上没有文字，但可能一些）。图像下方的空间是文本在其基线下使用的空间，用于显示g p或q等字符。

要摆脱这种情况，只需将垂直对齐设置为文本的底部（我的第一个解决方案），或者不要让图像成为内联元素（我的第二个解决方案）。

Answer 2

这个很容易;）

图像是内联的，这意味着它们使用了行高。你可以这样解决这个问题：

img{ display: block; }

Answer 3

由于您在img上设置了高度，因此您也可以设置框的高度 在样式表中，在height: 134px;

中添加.box

Answer 4

将此css添加到包含图像的div中

div.classname {
   margin:0;
   padding:0;
}

更新：

在对您的网站进行更多审核后尝试此

.box_thumb_img {
   height: 137px;

}

Answer 5

你总是可以给它一个负余量。这工作，在firebug上测试。

.box {
    float: left;
    margin: -3px 0 0;
    text-align: left;
}

Answer 6

您的所有图片都是200x134像素，因此请将包含的.box div符合这些尺寸：

.box {
    width: 200px;
    height: 134px;
}

这在Chrome中非常适合我。如果您有其他问题，那么正如其他海报所述，您的加价可能不是很好。在进一步更改CSS之前，请检查并更正任何HTML问题。

对于第二个问题，请尝试添加

display: block;
padding: 2px;

到您的.box_desc_title选择器。

Answer 7

您使用重置CSS吗？试着看Meyer Reset CSS 这通常可以消除任何奇怪的错误。