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

对应代码：

  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. LightOJ1257 Farthest Nodes in a Tree (II)（树的点分治）

    题目给一棵树,边带有权值,求每一点到其他点路径上的最大权和. 树上任意两点的路径都可以看成是经过某棵子树根的路径,即路径权=两个点到根路径权的和,于是果断树分治. 对于每次分治的子树,计算其所有结点到 ...

  2. 在Unity3D 4中关联Visual Studio 2012来编写C#

    Unity3D自带的MonoDevelop编辑器无论是js还是c#代码提示都很差,很诡异的就是变量名和方法名有的时候提示有的时候不提示.不过用Visual Studio代替MonoDevelop这个问 ...

  3. bzoj1030 [JSOI2007]文本生成器

    1030: [JSOI2007]文本生成器 Time Limit: 1 Sec  Memory Limit: 162 MBSubmit: 2654  Solved: 1100[Submit][Stat ...

  4. word统计章节字数

    只有我这么无聊了..写论文的时候发现每次想看这个章节的字数统计时,还需要全选然后再看字数统计,太麻烦了.所以想着用宏写个能直接查看选定章节的字数统计. 具体方法如下: 建立宏:视图--宏--录制宏-- ...

  5. 转：移动端html页面优化

    对于访问量大的网站来说,前端的优化是必须的,即使是优化1KB的大小对其影响也很大,下面来看看来自ISUX的米随随讲讲移动手机平台的HTML5前端优化,或许对你有帮助和启发. 概述 1. PC优化手段在 ...

  6. Configuration of OpenCV2.1.0 with VS2010

    Add in the system Path: C:\Program Files (x86)\OpenCV-2.1.0\build\bin\Debug Project->Project Prop ...

  7. sql中写标量函数生成大写拼音首字母

    USE [StockManageSystemV2] GO /****** Object: UserDefinedFunction [dbo].[PinYin] Script Date: 2016-08 ...

  8. VS - 实用技巧

    将Javascript 左边花括号置于新行 工具-选项-文本编辑器-格式设置-新行-全勾 开启调试自动窗口 || 监视变量 VS2012以下版本 CTRL + D + Q 其他版本 调试-窗口-自动窗 ...

  9. myeclipse 第一个web project

    创建一个java project. 不行...js文件是javascript代码的文件.应该放在web目录下...java文件是后台管理的程序代码.放在src目录下...不同的...   那是不是把所 ...

  10. Maven 创建多模块工程

    1. 创建父项目 new -->project-->maven-->maven Project,然后下一步, 进入new maven Project的Select project n ...