解决CSS图片底部3像素问题总结

时间:2023-12-16 13:00:14

解决三像素问题的总结:

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>