li 列表 高度、间距问题

这几天遇到一个问题，以前也没注意到 就是 列表 ul li 的高度间距问题 发现 li列表上下有间距 大概 有5px的高度 ，经过上网查询经过自己的实验发现如果li里面的内容是图片 只要设置图片的对齐方式就能解决间距问题。

解决方法 一

使 li 浮动，并设置 img 为块级元素

ul{
width: 280px;
}
ul li{
float:left;
display:block;
height:57px;
width:277px;
}
img{
display: block;
}

解决方法 二

设置 ul 的 font-size:0;

ul{
width: 280px;
font-size: 0;
}
ul li{
display:block;
height:57px;
width:277px;
}

解决方法 三

设置 img 的 vertical-align: bottom;

ul{
width: 280px;
font-size: 0;
}
ul li{
display:block;
height:57px;
width:277px;
}
img{
vertical-align:bottom;
}

解决方法 四

设置 img 的 margin-bottom: -5px;

ul{
width: 280px;
font-size: 0;
}
ul li{
display:block;
height:57px;
width:277px;
}
img{
margin-bottom: -5px;
}