Question

此页面显示两个图像，每个图像包含在一个单独的范围内，显示为内联块。对于第一个图像应用了“display：block”的附加样式，它删除了图像与其绿色边界跨度底部之间的空间（当元素被设置为内联样式时，为下行部分提供该空间）。相反，在第二个图像（仍然显示为内联）和第二个跨度的蓝色边框之间可以看到此空间。

为什么将第一个图像显示为块会在第一个图像的跨度和包含跨度的元素（橙色框）之间创建空间？是因为当一个内联元素包含在另一个内部元素中时，为下行分配的空间以垂直边距的方式合并？另外，我想知道为什么蓝色跨度的顶部和橙色容器之间有一个像素的空间。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html; charset=UTF-8">

<title>test</title>

<style>

.product_box {
    border: 1px solid green;
    display:inline-block; /* to put products side by side */
}
.product_image {
    display:block;
}
.shop_box { /* contains shop logo, shop URL,  link to view additional items (when not all items are displayed), and all the shop's products */
    text-align:center;
    border:1px solid orange;
}
#stats {
    border:1px solid blue;
    display: inline-block;
}


</style>

</head>

<body>

    <div class="shop_box">
        <span class="product_box">
            <img class="product_image" src="http://i.imgur.com/o2udo.jpg">
        </span>
        <span id="stats">
            <img src="http://i.imgur.com/o2udo.jpg" alt="test">
        </span>
     </div>

</body></html>

JSFiddle

Answer 1

每当HTML中的两个内联元素之间存在任何空格时，空格就会强制它们之间存在间隙。这种情况发生在您的<span>元素上，因为它们是内联元素。可以通过删除两个span标记之间的任何空格来删除此间隙，例如：

<span class="product_box">
    <img class="product_image" src="http://i.imgur.com/o2udo.jpg">
</span><span id="stats">
    <img src="http://i.imgur.com/o2udo.jpg" alt="test">
</span>

如果您的图片未设置为display: block，则可以通过在line-height: 0;元素上设置<span>来删除额外的垂直空间。
如果您将图片设置为display: block，那么您最好使用vertical-align属性将它们相互对齐;尝试：

.product_box, #stats { vertical-align: middle; }

在开发时使用CSS Reset通常是个好主意，以尽量减少这些浏览器默认设置的影响。

更新代码：

HTML：

<div class="shop_box">
    <span class="product_box">
        <img class="product_image" src="http://i.imgur.com/o2udo.jpg" />
    </span><span id="stats">
        <img src="http://i.imgur.com/o2udo.jpg" alt="test" />
    </span>
</div>

CSS：

.product_box, #stats { 
    line-height: 0;
    vertical-align: middle; }
.product_box {
    border: 1px solid green;
    display:inline-block; /* to put products side by side */
}
.product_image {
    display:block;
}
.shop_box { /* contains shop logo, shop URL,  link to view additional items (when not all items are displayed), and all the shop's products */
    text-align:center;
    border:1px solid orange;
}
#stats {
    border:1px solid blue;
    display: inline-block;
}

预览：http://jsfiddle.net/Wexcode/4QNhG/

Answer 2

编辑：

将第一个图像更改为显示块不会创建图像和包含元素之间的空间，它就在那之前。

关于单像素空间：这只是考虑其他元素的边界。第一张图像是否为显示块并不重要：

首先跨越无边框：http://jsfiddle.net/A6aLW/3/
两者都没有边界：http://jsfiddle.net/A6aLW/5/

什么解释了内联块的这种行为？

2 个答案: