图片排列在各浏览器下都有默认的边距,下面我们来测试下不同浏览器img边距的大小。

测试代码

<!DOCTYPE><html> <head> <title></title> <style type="text/css"> body{padding:0;} #box{width:200px;} img{margin:0;padding:0;height:100px;} </style> </head> <body> <div id="box"> <img src="http://www.fengweiqi.cn/wp-content/uploads/2012/11/t02678a396c9b48b6d8.gif" style="margin-right:0px;margin-bottom:0px;"/> <img src="http://www.fengweiqi.cn/wp-content/uploads/2012/11/t02678a396c9b48b6d8.gif"/> <img src="http://www.fengweiqi.cn/wp-content/uploads/2012/11/t02678a396c9b48b6d8.gif"/> <img src="http://www.fengweiqi.cn/wp-content/uploads/2012/11/t02678a396c9b48b6d8.gif"/> <img src="http://www.fengweiqi.cn/wp-content/uploads/2012/11/t02678a396c9b48b6d8.gif"/> <img src="http://www.fengweiqi.cn/wp-content/uploads/2012/11/t02678a396c9b48b6d8.gif"/> <img src="http://www.fengweiqi.cn/wp-content/uploads/2012/11/t02678a396c9b48b6d8.gif"/> </div> </body></html>

FF:

通过调整第一张图片margin-right和margin-bottom知道图片之间的空隙相等,大小有4px。

margin-right:-4px;

margin-left:-4px;

IE11、10、9、8、7、6、5

从图可以看出,图片间隙不尽相等,调整第一张图片得下面值:

margin-right:-8px;

margin-bottom:-5px;