解决CSS图片底部3像素问题总结
解决三像素问题的总结：
1.img标签的父标签增加font-size:0;
如、body{
font-size: 0;
}
2.img标签增加display:block;
img{
display:block;
}
3.img标签增加vertical-align: middle;
img{
vertical-align: middle;//或者vertical-align:top;
}
4.img标签增加float:left
img{
float:left;
}
为了更好地看效果，读者可以通过运行代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>三像素问题</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
#box{
width: 500px;
margin: 0 auto;
}
/*解决三像素问题*/
/*//方法一
body{
font-size: 0;
}*/
/*//二
img{
display:block;
}*/
/*//方法三
img{
//vertical-align: top;//vertical-align: top|middle;都可以
vertical-align: middle;
}*/
//方法四
img{
/*float: left;*/
display: block;
}
</style>
</head>
<body>
<div id="box">
<img width="300" height="300" src="http://p2.so.qhmsg.com/bdr/200_200_/t0170482b9930a35857.jpg" alt="加载" title="">
<img width="300" height="300" src="http://p2.so.qhmsg.com/bdr/200_200_/t0170482b9930a35857.jpg" alt="加载" title="">
</div>
</body>
</html>
