解決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>