解决img标签间距问题

  关于img标签间距问题:多个img之间有间距,包含img标签的div之间有间距。

代码如下:

 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>test</title>
6 <link rel="stylesheet" type="text/css" href="css/test.css">
7 </head>
8 <body>
9 <div>
10 <img src="data:images/1.png">
11 <img src="data:images/2.png">
12 <img src="data:images/3.png">
13 </div>
14 <div>
15 <img src="data:images/4.png">
16 <img src="data:images/5.png">
17 <img src="data:images/6.png">
18 </div>
19 <div>
20 <img src="data:images/7.png">
21 <img src="data:images/8.png">
22 <img src="data:images/9.png">
23 </div>
24 </body>
25 </html>

谷歌浏览器效果:

火狐浏览器效果:

  我们发现,不同div之间,上下有空白间隙,不同img之间,左右有间隙,而且,不同浏览器的左右间隙大小不同。

  经学习,我的解决办法是,同一个div下不同img标签之间不要留空格,并给img的父元素div标签加上属性font-size:0。这样一来,所有的图片就能够无缝拼接了。

最终效果图:

  下面来说一下为什么这样做可以解决问题。

  块级元素包含内联元素如图片文字等时,内联元素默认是和父级元素的baseline(基线)对齐的,而baseline又和父级元素底边有一定的距离(这个距离和font有关,不一定是5px),所以以上代码的效果中不同div之间有间隙,这是因为图片与父元素的底边有距离。说到baseline呢,其实它是vertical-align属性的默认值,vertical-align属性是设置元素的垂直排列的,用来定义行内元素的基线相对于该元素所在行的基线的垂直对齐,除了baseline对齐方式之外,还可以是sub | super | top | text-top | middle | bottom | text-bottom |inherit(任何的版本的Internet Explorer (包括 IE8)都不支持属性值 "inherit")。

  知道了问题产生的原因,就好对症下药解决问题了,其实就是要消除baseline对齐方式产生的距离。

  所以方法一,很容易想到,把对齐方式改一下不就好了,于是设置img的vertical-align属性为bottom;

  方法二就是上文说的给父元素加上font-size:0的属性,既然这个距离和font有关,那么把字体大小设为0,总该没有距离了吧;

  方法三可由方法二想到,既然为0可以,那把行高设的很小可不可以呢?经试验发现,本例图片大小为200px,设line-height不大于12就能够消除间隙了,鉴于这个距离一般是5px,所以可以把line-height设为5px左右;

  另外一个间隙是多个img标签的左右间隙,是由于img标签是行内元素,而事实是当行内元素之间有“回车”、“tab”、“空格”时就会出现间隙。

  所以方法就是上文提到的,去掉img标签之间所有的空格,如果又不想把所有连续的行内元素写到一行,可以多行注释,把空格回车什么的注释掉,就像下图这样;当连续的行内元素不是img时,也可以通过设置父元素的font-size为0来消除左右间隙。

解决img标签间距问题的更多相关文章

  1. 解决img标签与其它标签间隙问题?

    解决img标签间距问题 关于img标签间距问题:多个img之间有间距,包含img标签的div之间有间距 代码如下: <!DOCTYPE html> <html> <hea ...

  2. img标签间距问题

    关于img标签间距问题:多个img之间有间距,包含img标签的div之间有间距. <!doctype html> 2 <html lang="en"> 3 ...

  3. Myeclipse解决dubbo标签不识别问题

    Myeclipse解决dubbo标签不识别问题,引入dubbo.xsd文件,即可:              

  4. 解决embed标签显示在div上层【转藏】

    解决embed标签显示在div上层,非设置z-index 今天给屌炸了爆笑网增加了视频栏目,但是发现在IE8中,顶部浮动导航的div在移动到embed视频上时,总是被embed的flash文件盖住.分 ...

  5. 在Bootstrap开发中解决Tab标签页切换图表显示问题

    在做响应式页面的时候,往往需要考虑更多尺寸设备的界面兼容性,一般不能写死像素,以便能够使得界面元素能够根据设备的不同进行动态调整,但往往有时候还是碰到一些问题,如Tab标签第一页面正常显示,但是切换其 ...

  6. 解决a标签IE下点击后出现轮廓框

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 解决a标签点击会出现虚框现象

    1.解决a标签点击会出现虚框现象. 当a标签获得焦点的时候,a标签的周围就会出现虚框,它不同于border,不占任何宽度,a失去焦点的时候就会消失,就是outline. 在遨游,Firefox ,IE ...

  8. 用python解决打标签时将xml文件的标签名打错

    用python解决打标签时将xml文件的标签名打错 问题描述:再进行达标签时将magnetic_tile的标签名错误的打成了magnetic_title,又不想一张一张的修改 出现问题的xml文件 & ...

  9. 【译】Asp.net mvc 使用ITextSharp PDF to HTML (解决img标签问题)

    前言:因项目需求,需要将HTML代码转成PDF.大致上已经实现了,可以是发现使用ITextSharp(我现在的版本是5.5.9)的时候,img标签中的src只能跟绝对路径. 在百度上找了一个上午,有一 ...

随机推荐

  1. 【BZOJ2818】Gcd 欧拉筛

    Description 给定整数N,求1<=x,y<=N且Gcd(x,y)为素数的数对(x,y)有多少对. Input 一个整数N Output 如题 Sample Input 4 Sam ...

  2. iOS 两种易混淆的存储路径

    一,NSBundle 1>我们可以通过解压等操作获取 NSBundle 中的内容. 2>NSBundle主要是包路径,也就是代码编译后的 imge 和 sb 资源文件... 3>例如 ...

  3. JAVA复制网络图片到本地

    import java.io.File; import java.io.FileOutputStream; import java.io.InputStream; import java.io.Out ...

  4. Hibernate的第一次测试解析

    解析:此题目考查的是对Hibernate中交叉连接的理解.HQL支持SQL风格的交叉连接查询,交叉连接适用于两个类之间没有定义任何关联时.在where字句中,通过属性作为筛选条件,如统计报表数据.使用 ...

  5. [LintCode] Happy Number 快乐数

    Write an algorithm to determine if a number is happy. A happy number is a number defined by the foll ...

  6. HDU 2546

    饭卡 Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submiss ...

  7. 关于 QRCode 的问题[C# 生成二维码固定大小]

    一直在纠结了一天多的问题:就是为什么生成的二维码会随着内容多少的变化而变化大小,但是为什么网上做出来的二维码内容变化但是大小却没有变化?刚开始的时候我就一直围绕着是不是根据缩略图来做的,但是这个方法行 ...

  8. thinkphp框架验证码验证一次

    做异步验证验证码,只要验证一次结果正确,拿相同的值再次来对比,返回结果就不正确.我看到论坛中有人说,tp框架只要验证过一次正确后验证码就销毁了.确实是这个效果,但具体的还没深入了解

  9. ob_clean()

    我在本地写的系统,部署到虚拟机上的时候,验证码出现问题不显示.加上这个函数之后,验证码出现了.具体的该学习去了.

  10. Greenplum 集群部署

    最近开始接触Greenplum,线上也在使用了,感觉还不错,本次介绍一下集群的部署方法.那么Greenplum的架构如下: (架构图来源网络) 简单来说GPDB是一个分布式数据库软件,其可以管理和处理 ...