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

此页面显示两个图像，每个图像都包含在一个单独的跨度内显示为内嵌块。对第一个图像应用“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

来源

2011-12-20 jela

我不知道原因，但我知道，加入' line-height：0'将删除白色缝隙。谢谢你的小提琴，但'看''你在说什么对我来说真的很难。您可能想要使用较小的图像，以便差距更明显.http：// jsfiddle。net/A6aLW/1/ – mrtsherman 2011-12-20 17:16:57

每当有两个同轴之间的任何空白HTML中的元素，中的空白将强制它们之间的差距。这发生在您的<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，你可以在你的<span>元素设置line-height: 0;删除多余的垂直空间。
如果您将图片设置为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/

来源

2011-12-20 17:18:07 Wex

即使删除所有空格，我仍然看到这个？ http://jsfiddle.net/A6aLW/2/ – mrtsherman 2011-12-20 17:23:09

发生这种情况是因为您的一个''标记设置为'display：block;'。从该图像中删除'display：block;'，或将两个''标签设置为'vertical-align：middle;'。 – Wex 2011-12-20 17:26:41

啊，我终于明白了。 +1为一个很好的解释。 – mrtsherman 2011-12-20 17:30:53