TD微不足道的修復服務

Question

我花了2天的時間試圖弄清楚爲什麼這個TD比它應該有更大的高度，而且我知道這可能是一些微不足道的東西，我幾乎無法觀察。

這是HTML的外觀在檢查：

普萊舍注意，高度爲50像素，但TD犯規應對它

即使像高爲50像素： ）

其中d 5px來自哪裏？

Answer 1

問題的一個簡單的演示：

<table><tr><td style="border: solid red 1px; padding:0"><img 
    src=http://lorempixel.com/54/50/ alt=""></table> 

隨着繪製的小區邊界，你可以看到有圖像下方的空間。它保留給字母下行，即使沒有真正的字母存在 - 內容仍然被視爲文本。

最簡單的解決方法是添加以下到樣式表：

td img { display: block; } 

這導致圖像被設置爲一個簡單的塊，而不是被當作元件文本（大信，所以說）坐在文字的基線上。