图像下的空白[重复]

Question

添加边框后，我无法删除图像下的空白。

我该如何摆脱它？

<div style="width: 1200px;">
<div style="float: left; width: 358 px; margin: 0px 7px 0px 0px; border: 1px solid #021a40;"><img src="{{media url="wysiwyg/3row/3row-no-boarder_07.jpg"}}" alt="" /></div>
<div style="float: left; width: 358 px; margin: 0px 7px 0px 7px; border: 1px solid #021a40;"><img src="{{media url="wysiwyg/3row/3row-no-boarder_04.jpg"}}" alt="" /></div>
<div style="float: left; width: 358 px; margin: 0px 0px 0px 7px; border: 1px solid #021a40;"><img src="{{media url="wysiwyg/3row/3row-no-boarder_09.jpg"}}" alt="" /></div>
<div style="clear: both;">&nbsp;</div>
</div>
</div>
</div>

http://postimg.org/image/5rvgc5h8p/

小提琴：https://jsfiddle.net/mastervision/zap4smbm/

我使用 Magento 编辑器：http://postimg.org/image/c62ljlmoj/

Answer 1

添加这个

div{
line-height: 0;
}

Fiddle

Answer 2

在您的浮动容器中，为您的图片提供display: block; 和width: 100%。

这将导致图像将其宽度拉伸到其父级宽度，如果此父级没有定义高度，它应该完全适合。

如果这不起作用，请在我的回答下发表评论，我会在找到时间时为您设置一个案例；）

OFFTOPIC

哦，当然你会想要摆脱所有的内联 CSS。 inline css是纯代码重复，可以用external stylesheets解决。

在这样的样式表中，您基本上可以按名称设置样式，因此您可以在样式表中执行此操作：

.my-image-box {
    position: relative;
    float: left;
    width: 300px;
    height: auto;
}

.my-image-box img {
    display: block;
    width: 100%;
}

然后在您的 HTML 中，链接新样式表后，您可以这样做：

<div class="my-image-box">
    <img src="..." />
</div>

这意味着您的 HTML 文件中没有那些庞大的 CSS - 使它更小并且作为额外的奖励，当您更改样式表中的某些内容时，您将同时在任何地方更改它：D

IMO 是双赢！

Answer 3

这是因为您的图片来源可能不适合此尺寸的尺寸或纵横比。如果您可以发布小提琴，我将能够测试这个理论。您可以使用object-fit 属性或background 属性来修复它。

Answer 4

试试 img {display: block;}

如果图像尺寸正确并且您仍然有空白。

Answer 5

一种选择是使用vertical-align 属性；例如

img {
    vertical-align: baseline;
}