一個img標簽周圍的白色空間

Question

這個問題涉及圖片中的黑盒子（它是<th>標簽）。

<th>標簽最終高度為23px。 圖像是18像素×18像素。 5px底部邊緣來自何處以及如何擺脫它？

border，padding和margin都設置為0.手動設置<tr>的高度， <th>標簽為18px不做任何事情。 低於23px的任何東西都沒有效果。

救命！

Answer 1

圖像是內聯元素，因此它們位於元素的文本行中。 圖像在文本的基線上對齊，因此在基線下方有一個用於懸掛字符（如g和j）的裝訂線。 額外的空間是排水溝。

您可以通過將圖像轉換為塊元素來消除空間。 正如你想要的圖像彼此相鄰，使用樣式float:left; 會使它們阻擋元素並排列它們。

Answer 2

您的html源代碼中的圖像周圍是否有空格？ 如果是，請嘗試刪除它們：

<th><img src="..." alt="" /></th>

Answer 3

這可能是line-height 。 嘗試將其設置為零。 示例HTML：

<table>
    <tbody>
        <tr>
            <td>
                <img src="http://placekitten.com/16/16">
                <img src="http://placekitten.com/16/16">
            </td>
        </tr>
    </tbody>
</table>

和CSS：

td {
    background: #000;
    line-height: 0;
}

實例： http ： //jsfiddle.net/ambiguous/4VMTV/

嘗試使用和不使用line-height: 0 ，您應該看到差異。

Answer 4

如果您使用的Chrome或火狐 + 螢火蟲 ，您可以用鼠標右鍵單擊該th和檢查的元素。 這將提供額外的細節，幫助您確定添加的填充或邊距，以及原因。