【问题】页面中如果有多张图片,那么图片之间会有一些间距,在某些情况下(如切好的图片再次拼接),在显示上就会出现一些问题。效果如下:

对应代码:

  1. <div class="f0">
  2. <img src="data:images/1.png" >
  3. <img src="data:images/2.png" >
  4. <img src="data:images/3.png" >
  5. </div>

【问题分析】

这个是浏览器的一个设计问题。

1.img本来是行内元素,却可以用width 和height,当父元素没有设置高度的时候,用子元素们的高度计算出的高度给父元素的时候就会出现3px空隙这类的问题。

2.img图片默认排版为 inline-block;而所有的inline-block元素之间都会有空白。

【解决方法】

方法一:

将img显示设置成  display:block;

因图片横向排列,同时设置向左浮动,样式代码如下:

  1. .f0 img{
  2. width: 150px;
  3. display: block;
  4. float: left;

方法二:

将父容器字体大小设为零。font-size:0;

  1. div.f0 {
  2. font-size: 0;
  3. }

方法三:

去掉<img>标签之间的空格,将所用的<img>标签书写在同一行(即各个img标签之间不留空格),无须设置其他样式。

  1. <div class="f0">
  2.   <img src="data:images/1.png"><img src="data:images/2.png"><img src="data:images/3.png">
  3. </div>

效果:

【小问题】如果在样式中引用了bootstrap.css并且为图片设置了"img-rounded"类,

并且根据上述的方法设置样式,则在图片之间会出现1px左右的缝隙。如下:

【示例完整代码】

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Document</title>
  6. </head>
  7. <style>
  8. body{
  9. background: #dedede;
  10. padding: 5% 5%;
  11. margin: 0;
  12. }
  13. div.f0{
  14. font-size: 0;
  15. }
  16. div.f0 img{
  17. width: 150px;
  18. display: block;
  19. float: left;
  20. }
  21. .f0 img{
  22. width: 150px;
  23. float: left;
  24. display: block;
  25. }
  26. </style>
  27. <body>
  28. <div class="f0">
  29. <img src="data:images/1.png">
  30. <img src="data:images/2.png">
  31. <img src="data:images/3.png">
  32. </div>
  33. </body>
  34. </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

css写作建议和性能优化小结

img图片之间的间距问题的更多相关文章

  1. 【转载】img图片之间的间距问题

    [问题]页面中如果有多张图片,那么图片之间会有一些间距,在某些情况下(如切好的图片再次拼接),在显示上就会出现一些问题.效果如下: 解决方案参看以下文章 img图片之间的间距问题

  2. UIScrollView浏览一组图片,且图片与图片之间有间隔

    ---恢复内容开始--- UIScrollView是可以浏览一组view的,只要将其属性 pagingEnabled设置为true就可以了.具体过程是这样的, 1:将一组图片按照从左到右的顺序添加到U ...

  3. [Android Pro] PullToRefreshListView怎么设置各个item之间的间距

    reference to :  http://blog.csdn.net/qq_25943493/article/details/50923895 要设置第三方的上拉下载listView的item之间 ...

  4. fontsize可以解决img标签插入图片之间的缝隙

    当我们用img标签连续插入多张图片的时候,图片和图片之间会出现缝隙,通常我们的做法是用DIV将图片包起来进行浮动来解决这个问题,但是还有一种解决方法是在img的父级元素里面设置font-size:0来 ...

  5. 去除行内(inline/inline-block)元素之间的间距

    先展示一下,行内元素之间存在间距,实例代码如下: <style> div { color: #fff; padding: 25px 50px; } .inline-f00 { displa ...

  6. 如何去除内联元素(inline-block元素)之间的间距(转载)

    如何去除内联元素(inline-block元素)之间的间距   前几天写一个专题页 div{width:900px;}div a{ display:inline-block; width:300px; ...

  7. iOS设置tableViewCell之间的间距(去掉UItableview headerview黏性)

    经常在项目中遇到自定义cell的情况,而且要求cell之间有间距,但是系统没有提供改变cell间距的方法,怎么办? 方法1:自定义cell的时候加一个背景View,使其距离contentView的上下 ...

  8. canvas和图片之间的互相装换

    canvas和图片之间的互相装换 一.总结 一句话总结:一个是canvas的drawImage方法,一个是canvas的toDataURL方法 canvas drawImage() Image对象 c ...

  9. 两个button之间的间距如何去掉

    在外层加上一个父元素,设置font-size:0;即可. 两个按钮之间的间距如何去掉

随机推荐

  1. Designing CSS Layouts With Flexbox Is As Easy As Pie

    This article is an updated excerpt of the chapter “Restyle, Recode, Reimagine With CSS3″ from our Sm ...

  2. 【COGS】714. USACO 1.3.2混合牛奶(贪心+水题)

    http://cojs.tk/cogs/problem/problem.php?pid=714 在hzwer的刷题记录上,默默地先跳过2题T_T...求凸包和期望的..T_T那是个啥..得好好学习 看 ...

  3. 【wikioi】1403 新三国争霸(dp+kruskal)

    http://wikioi.com/problem/1403/ 一开始的确感觉和bzoj1003很像,不同的是这里还要求联通,求最小的边. 我们可以想到用最小生成树(为嘛我自己想不到呢..) 我们可以 ...

  4. POST模拟百度登录和自动发帖

    这里用HttpClient发包模拟百度登录和发帖,验证码部分采用机器下载人工识别. 登陆百度的原理:1. 访问https://passport.baidu.com/v2/api/?getapi& ...

  5. MySQL索引分析与优化

    1.MySQL能够在name的索引中查找“Mike”值,然后直接转到数据文件中相应的行,准确地返回该行的 peopleid(999).在这个过程中,MySQL只需处理一个行就可以返回结果.如果没有“n ...

  6. log4j - 配置文件

    Log4J的配置文件(Configuration File)就是用来设置记录器的级别.存放器和布局的,它可接key=value格式的设置或xml格式的设置信息. 通过配置,可以创建出Log4J的运行环 ...

  7. shenyi 语录

    [讲师]沈逸(65480539) 2016-06-08 14:58:42   会centos 转redhat是分分钟的事 [讲师]沈逸(65480539) 2016-06-08 14:58:54 查看 ...

  8. 《GK101任意波发生器》升级固件发布(版本:1.0.2build539)

    一.固件说明: 硬件版本:0,logic.3 固件版本:1.0.2.build539 编译日期:2014-10-08 ====================================== 二. ...

  9. 【新产品发布】【iCore2 ARM / FPGA 双核心板】

    iCore2是一款包含ARM / FPGA两大利器的双核心板.ARM方面,采用意法半导体高性能的32位Cortex-M3内核STM32F103VE微处理器,主频达72MHz,并包含丰富外设接口.FPG ...

  10. Codeforeces 707B Bakery(BFS)

    B. Bakery time limit per test 2 seconds memory limit per test 256 megabytes input standard input out ...