【问题】页面中如果有多张图片,那么图片之间会有一些间距,在某些情况下(如切好的图片再次拼接),在显示上就会出现一些问题。效果如下:
对应代码:
<div class="f0"> <img src="images/1.png" > <img src="images/2.png" > <img src="images/3.png" > </div>
【问题分析】
这个是浏览器的一个设计问题。
1.img本来是行内元素,却可以用width 和height,当父元素没有设置高度的时候,用子元素们的高度计算出的高度给父元素的时候就会出现3px空隙这类的问题。
2.img图片默认排版为 inline-block;而所有的inline-block元素之间都会有空白。
【解决方法】
方法一:
将img显示设置成 display:block;
因图片横向排列,同时设置向左浮动,样式代码如下:
.f0 img{ width: 150px; display: block; float: left;
方法二:
将父容器字体大小设为零。font-size:0;
div.f0 { font-size: 0; }
方法三:
去掉<img>标签之间的空格,将所用的<img>标签书写在同一行(即各个img标签之间不留空格),无须设置其他样式。
<div class="f0"> <img src="images/1.png"><img src="images/2.png"><img src="images/3.png"> </div>
效果:
【小问题】如果在样式中引用了bootstrap.css并且为图片设置了"img-rounded"类,
并且根据上述的方法设置样式,则在图片之间会出现1px左右的缝隙。如下:
【示例完整代码】
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> body{ background: #dedede; padding: 5% 5%; margin: 0; } div.f0{ font-size: 0; } div.f0 img{ width: 150px; display: block; float: left; } .f0 img{ width: 150px; float: left; display: block; } </style> <body> <div class="f0"> <img src="images/1.png"> <img src="images/2.png"> <img src="images/3.png"> </div> </body> </html>
相关问题更多方案讨论参考:
http://www.w3cfuns.com/article-5597087-1-1.html
http://www.dynamicdrive.com/forums/showthread.php?24880-White-space-between-lt-li-gt-items