什麼解釋了行內塊的這種行爲？

此頁面顯示兩個圖像，每個圖像都包含在一個單獨的跨度內顯示爲內嵌塊。對第一個圖像應用「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