li列表設置了行高，但每行後面都有4px的空白間隙

相信大家經常用到ul li來製作信息列表，今天有一個同事問我一個這樣的問題”li列表設置了行高，但每行後面都有4px的空白間隙“。n年前，我也曾遇到過這樣的問題，今天就把它記錄下來吧。

ul li{
clear:both;
overflow:hidden;
height:32px;
line-height:32px;
background: url(../images/arrow.png) left 9px no-repeat #f2e1ff;
}

這段css在各瀏覽器中的顯示如圖：

如何把li行之後的4px空白除去呢。So easy呀

加上”vertical-align:bottom“

style:

ul li{
clear:both;
overflow:hidden;
height:32px;
line-height:32px;
background: url(../images/arrow.png) left 9px no-repeat #f2e1ff;
vertical-align:bottom
}