解决三像素问题的总结:
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> |