img图片之间的间距问题
【问题】页面中如果有多张图片，那么图片之间会有一些间距，在某些情况下（如切好的图片再次拼接），在显示上就会出现一些问题。效果如下：
对应代码：
<div class="f0">
<img src="data:images/1.png" >
<img src="data:images/2.png" >
<img src="data: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="data:images/1.png"><img src="data:images/2.png"><img src="data: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="data:images/1.png">
<img src="data:images/2.png">
<img src="data: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
img图片之间的间距问题的更多相关文章
- 【转载】img图片之间的间距问题
[问题]页面中如果有多张图片,那么图片之间会有一些间距,在某些情况下(如切好的图片再次拼接),在显示上就会出现一些问题.效果如下: 解决方案参看以下文章 img图片之间的间距问题
- UIScrollView浏览一组图片，且图片与图片之间有间隔
---恢复内容开始--- UIScrollView是可以浏览一组view的,只要将其属性 pagingEnabled设置为true就可以了.具体过程是这样的, 1:将一组图片按照从左到右的顺序添加到U ...
- [Android Pro] PullToRefreshListView怎么设置各个item之间的间距
reference to : http://blog.csdn.net/qq_25943493/article/details/50923895 要设置第三方的上拉下载listView的item之间 ...
- fontsize可以解决img标签插入图片之间的缝隙
当我们用img标签连续插入多张图片的时候,图片和图片之间会出现缝隙,通常我们的做法是用DIV将图片包起来进行浮动来解决这个问题,但是还有一种解决方法是在img的父级元素里面设置font-size:0来 ...
- 去除行内(inline/inline-block)元素之间的间距
先展示一下,行内元素之间存在间距,实例代码如下: <style> div { color: #fff; padding: 25px 50px; } .inline-f00 { displa ...
- 如何去除内联元素（inline-block元素）之间的间距（转载）
如何去除内联元素(inline-block元素)之间的间距 前几天写一个专题页 div{width:900px;}div a{ display:inline-block; width:300px; ...
- iOS设置tableViewCell之间的间距（去掉UItableview headerview黏性）
经常在项目中遇到自定义cell的情况,而且要求cell之间有间距,但是系统没有提供改变cell间距的方法,怎么办? 方法1:自定义cell的时候加一个背景View,使其距离contentView的上下 ...
- canvas和图片之间的互相装换
canvas和图片之间的互相装换 一.总结 一句话总结:一个是canvas的drawImage方法,一个是canvas的toDataURL方法 canvas drawImage() Image对象 c ...
- 两个button之间的间距如何去掉
在外层加上一个父元素,设置font-size:0;即可. 两个按钮之间的间距如何去掉
随机推荐
- BZOJ2707 : [SDOI2012]走迷宫
首先求出SCC缩点,E[T]=0,按拓扑序计算 对于无边连出的块,如果不是T所在块,则称该块是死路块 对于一个块,如果其中的点连出的边是死路块,则它也是死路块 否则对于每块进行高斯消元求出期望 如果S ...
- c++ string 结束符‘\000’
昨天输出string类型时总是出错,发现输出到文件的一行里多了^@,输出到console却看不到,debug发现,string类型中多了\000,这主要由于我想要用\0截掉字符串最后一位,所以把字符串 ...
- POJ 1651 (区间DP)
题目链接: http://poj.org/problem?id=1651 题目大意:加分取牌.如果一张牌左右有牌则可以取出,分数为左牌*中牌*右牌.这样最后肯定还剩2张牌.求一个取牌顺序,使得加分最少 ...
- HDU 2653 (记忆化BFS搜索+优先队列)
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=2653 题目大意:迷宫中有普通点和陷阱.其中普通点可以走可以飞,但是陷阱只能飞.走耗时1,飞耗时2.但 ...
- KMP算法（转载）
转载http://blog.csdn.net/yutianzuijin/article/details/11954939 kmp算法又称“看毛片”算法,是一个效率非常高的字符串匹配算法.不过由于其难以 ...
- 【POJ】1556 The Doors（计算几何基础+spfa）
http://poj.org/problem?id=1556 首先路径的每条线段一定是端点之间的连线.证明?这是个坑...反正我是随便画了一下图然后就写了.. 然后re是什么节奏?我记得我开够了啊.. ...
- BST & Treap
二叉查找树递归定义: 二叉查找树是空树或不是空树二叉查找树的左二叉查找树的值一定小于二叉查找树的值或左二叉查找树为空树二叉查找树的右二叉查找树的值一定大于二叉查找树的值或右二叉查找树为空树 不维护父亲 ...
- lightning mdb 源代码分析（4）—MVCC/COW
本博文将描述MVCC和cow技术以及LMDB中如何使用以及实现这两种技术. COW(Copy On Write): COW技术背后的思想是拖延技术,基本方法是假如有多个调用者需要访问的资源,在其初始化 ...
- cmd命令行查看windows版本
1.ver命令不显示sp几 C:\>ver Microsoft Windows XP [Version 5.1.2600] C:\> 08: C:\Users\Administrator& ...
- PHP5 session 详解【经典】 -- 转帖
PHP5 session 详解[经典] http协议是WEB服务器与客户端(浏览器)相互通信的协议,它是一种无状态协议.所谓无状态,指的是不会维护http请求数据,http请求是独立的,非持久的.而越 ...