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。内联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属性; e.g。

img {
    vertical-align: baseline;
}

图像下的白色空间

5 个答案: