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
}