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

问题描述

| 在此示例中： http://jsfiddle.net/trusktr/g5sa5/ 您会在每行图像之间看到一个白色的间距。你如何摆脱它     

解决方法

为此至少有两种解决方案。只需在您的

.box_thumb_img

样式中添加以下行之一：

vertical-align: bottom;

要么

display: block;

说明：默认情况下，浏览器将图像视为嵌入式元素。它将图像置于与文本基线相同的高度（请参见下图）（是的，页面上没有文本，但可能有一些）。图像下方的空间是文本在其基线下将用于显示g p或q之类的字符的空间。 要消除这种情况，只需将垂直对齐方式设置为文本的底部（我的第一个解决方案），或者不要让图像成为行内元素（我的第二个解决方案）。     ,这很容易;） 图像是内联的，这意味着它们利用了行高。您可以这样解决：

img{ display: block; }

    ,由于要在img上设置高度，因此也可以设置盒子的高度。 在样式表中，在

.box

中添加

height: 134px;

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

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

更新： 在对您的网站进行更多评论后，请尝试此

.box_thumb_img {
   height: 137px;

}

    ,您总是可以给它负的边距。这在萤火虫上进行了测试。

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

    ,您所有的图片均为200x134px，因此使包含的.box div遵循以下尺寸：

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

这对我在Chrome中非常有效。如果您还有其他问题，那么正如其他张贴者所指出的那样，您的标记可能格式不正确。在进行进一步的CSS更改之前，请检查并更正所有HTML问题。 对于第二个问题，请尝试添加

display: block;
padding: 2px;

到您的.box_desc_title选择器。     ,您是否正在使用重置的CSS？尝试查看Meyer重置CSS 通常，这样可以消除任何奇怪的错误。