img标签间距问题
关于img标签间距问题：多个img之间有间距，包含img标签的div之间有间距。
<!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来消除左右间隙。
转自：http://www.cnblogs.com/lovelyun/p/4846222.html
img标签间距问题的更多相关文章
- 解决img标签间距问题
解决img标签间距问题 关于img标签间距问题:多个img之间有间距,包含img标签的div之间有间距. 代码如下: 1 <!doctype html> 2 <html lang=& ...
- p标签间距问题
用<p></p>标签写文本时,控制行与行之间的高度最好用line-height,不要用margin或padding: 因为P标签本身就带有一定的上下间距,且自带的间距在模拟 ...
- CSS 格式 设置标签间距 和 input slot
作者:张艳涛 日期:2020-07-29 CSS设置俩个标签的间距 及 Input Slots <div> <div class="m-b-20 ovf-hd"& ...
- span标签间距
最近在做的一个项目里面碰到这么一个问题: <p> <span>块1</span> <span>块2</span> </p> 在“ ...
- RFID标签天线的三种制作方法
在RFID标签中,天线层是主要的功能层,其目标是传输最大的能量进出标签芯片.RFID天线是按照射频识别所要求的功能而设计的电子线路,将导电银浆或导电碳浆网印在PVC.PC或PET上,再与面层.保护层和 ...
- table标签修改tr,td标签的行距
修改tr标签的行距,tbale标签的td标签间距 看如下Css文件的代码,其都没有table的tr行距产生效果 tr{ margin-top: 10px; padding: 10px; } td{ m ...
- 解决img标签与其它标签间隙问题？
解决img标签间距问题 关于img标签间距问题:多个img之间有间距,包含img标签的div之间有间距 代码如下: <!DOCTYPE html> <html> <hea ...
- 标签栏使用Demo二
// // PHTagViewFrame.m // 标签的使用二 // // Created by 123 on 16/9/6. // Copyright © 2016年 彭洪. All ri ...
- web基础笔记整理(一)
一.程序的分层 1.界面层: 某种类型的应用程序 a.DOS(控制台运行) b.桌面应用程序--独立安装,独立运行 c.web类型--现在流行的 单机版:电脑上要安装,程序升级之后,电脑上也要升级-- ...
随机推荐
- CWnd* pParent
Dlg(CWnd* pParent = NULL)的意思是:构造函数.创建对象时第一个调用的地方.CWnd* pParent=NULL是构造的参数,可以不传入,默认为NULL 构造函数(constru ...
- WinMTR使用教程
WinMTR下载链接:https://share.weiyun.com/53iPoC7 WinMTR官网连接:http://winmtr.net/download-winmtr/ WinMTR 使用方 ...
- 零基础学习Linux培训，应该选择哪个培训班？
云计算早已不是什么稀奇的概念,它的火爆让Linux运维工程师这个职业越来越重要.在当今各类云平台提供的系统中,Linux系统几乎毫无争议的独占鳌头,市场份额进一步扩张. 这也让Linux运维工程师职位 ...
- Luogu P1629 邮递员送信
P1629 邮递员送信 题目描述 有一个邮递员要送东西,邮局在节点1.他总共要送N-1样东西,其目的地分别是2~N.由于这个城市的交通比较繁忙,因此所有的道路都是单行的,共有M条道路,通过每条道路需要 ...
- 16.copy_to定制组合field解决cross-fields搜索弊端
主要知识点: 在index的mapping中加copy_to字段的方法 copy_to搜索方法 用most_fields策略,去实现cross-fields搜索,有3大弊端,为了解决这三个弊端 ...
- Python os.listdir() 方法
概述 os.listdir() 方法用于返回指定的文件夹包含的文件或文件夹的名字的列表.这个列表以字母顺序. 它不包括 '.' 和'..' 即使它在文件夹中. 只支持在 Unix, Windows 下 ...
- Linux - nginx+uWSGI+django+virtualenv+supervisor发布web服务器
目录 Linux - nginx+uWSGI+django+virtualenv+supervisor发布web服务器 crm django项目部署流程 使用supervisro启动uwsgi,退出虚 ...
- 实验十二 团队作业8：软件测试与Alpha冲刺 第五天
项目 内容 这个作业属于哪个课程 老师链接 这个作业的要求在哪里 实验十二 团队作业8:软件测试与Alpha冲刺 团队名称 Always Run! 作业学习目标 (1)掌握软件测试基础技术 (2)学习 ...
- 【郑轻邀请赛 I】这里是天堂！
[题目链接]:https://acm.zzuli.edu.cn/zzuliacm/problem.php?id=2135 [题意] [题解] 答案应该为C(n,a)∗C(m,b)/C(n+m,a+b) ...
- qwb和李主席
qwb和李主席 Time Limit: 4 Sec Memory Limit: 128 MB Description qwb和李主席打算平分一堆宝藏,他们想确保分配公平,可惜他们都太懒了,你能帮助他 ...