【问题标题】:White space under image [duplicate]图像下的空白[重复]
【发布时间】:2015-08-23 03:02:54
【问题描述】:

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

我该如何摆脱它?

<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/

【问题讨论】:

    标签: html css


    【解决方案1】:

    添加这个

    div{
    line-height: 0;
    }
    

    Fiddle

    【讨论】:

    • 这是display: inline-block 问题的解决方案,但我仍然宁愿将图像设置为display: block,因为如果 OP 曾经对他的图像容器进行任何基于文本的更改,他将拥有很难找到这条线:)
    • 行高:0;成功了! Imagefix 证明:postimg.org/image/tmf8meycf Magento 设置postimg.org/image/b5ktvlie7 虽然正如您在我的 magento 中看到的,我添加了 3 次路径,但我有一种感觉,我正在以一种不那么有条理的方式进行操作设置我的代码的更好方法?
    【解决方案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 是双赢!

    【讨论】:

    • 感谢您的好回答。好的,我试试看。虽然我在 Magento(cms 系统)中工作,但我只有一个文本编辑器可以发布。当您只有一个 Magento 编辑器字段可供使用时,您将如何设置代码。 postimg.org/image/c62ljlmoj PS。整个代码设置倾向于让我感到困惑,因为我不确定代码的哪一部分受代码的另一部分影响..
    • 嗯...是的,我确实注意到您使用了模板系统,但只是不知道是哪一个;)我从未使用过 magento,所以我无法帮助您,但我可以问您一个简单的问题也?因为我想问你是不是出于好奇的程序员;)
    • 行高:0;成功了! Imagefix 证明:postimg.org/image/tmf8meycf Magento 设置postimg.org/image/b5ktvlie7 虽然正如您在我的 magento 中看到的,我添加了 3 次路径,但我有一种感觉,我正在以一种不那么有条理的方式进行操作设置我的代码的更好方法?
    • 不,我不是专业人士,我认为我的问题很明显 ^^ 我尝试成为一名专业人士..
    • 在 HTML 和 CSS 中组织代码的方法是使用外部样式表。我会说从 PHP 和 magento / 所有这些东西退后一步,因为它会在这个级别吞噬你。最好从简单的 HTML 和 CSS 开始。现在,正如我所看到的,您正处于使用内联 css 进行样式设置的第一阶段,因此 ^.^
    【解决方案3】:

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

    【讨论】:

    • 我现在在线程中添加了一个小提琴 :)
    • 好的,我怎样才能找到/计算正确的纵横比?我在帖子中添加了一个小提琴..
    【解决方案4】:

    试试 img {display: block;}

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

    【讨论】:

    • 好的,这个字符串是什么?
    • 图像是“内联”元素,因此浏览器会在基线处添加一些空白。这会改变默认行为。
    • 好的,奇怪的是他们为什么要添加空间,他们这样做有什么好的理由吗?对不起,如果我问愚蠢的问题。
    • 我认为这是因为下降器en.wikipedia.org/wiki/Descender 所以浏览器会尝试调整图像基线,因为它们是字母......
    【解决方案5】:

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

    img {
        vertical-align: baseline;
    }
    

    【讨论】:

    • 第一次尝试失败。