两个span标签(或i标签)之间有间隙的问题
有三个i标签，中间一个放文字，前后两个放的是iconfont
效果图如下：
会发现三个i标签渲染出来之后中间会有挺大的空隙：
尝试设置边距为0无果：
解决方法：
方法一：（不推荐）
去掉三个i标签前后的空格（换行也不行），让它们连着写
的确有效果，但是这样代码太乱，看着难受；
方法二：
①将父元素font-size设置为0；
②在子元素（i）那里设置字体；
如果是span标签之间出现空隙，也可以用此方法解决。
update:
在实现如下图所示布局的时候，ul宽100%,li宽20%,inline-block并且没有左右内（外）边距，但是最后一个li还是被挤到了下一行
审查元素发现两个li之间其实是有一点空隙的（通过像素大厨测量大概是3px，通过查阅资料发现其实是4px），
解决方法：
①可以通过弹性布局display:flex来解决（默认会排列在一行，还要加一个flex-wrap:wrap让超出部分显示在下一行）
②给li设置float:left也可以解决
③同样地，ul的font-size设为0，li里面再具体设相应字体大小
④最直接但也是最不推荐的方法：li之间不换行也不要有空格
其实不仅是i和span，li甚至两张图片间出现缝隙的问题都可以用方法③解决。
上面提到的情况其实有共性：
①是内联元素或者内联块
②是其他元素的子元素
那么出现这个问题的原因是什么呢？？
这是因为内联或者内联块是同行显示的，而为了代码的整洁和可读性，通常会在li标签之间换行；HTML默认将多个空格显示为一个，这就是为什么两个li之间（准确地说是内联或内联块元素之间）会默认有一点间距。
原因知道了，解决的思路也就变成：怎么去掉这些空格；
除了上面提到的方法，其实还有很多可以去掉间隙的方式，如加注释等，具体的可以看看这个：
https://stackoverflow.com/questions/5078239/how-do-i-remove-the-space-between-inline-block-elements/5078297#5078297
两个span标签(或i标签)之间有间隙的问题相关推荐
- 将两个span标签并列
在做学期项目的时候,我和我的小伙伴遇到一个让我们困扰了很久的问题,就是点菜页面上折扣价和原价,我们是希望这两个价格在同一行的,两个价格写在了span标签中. 于是我们开始想怎么样可以让两个span不换 ...
- 【Web】HTML（No.03）HTML标签 （一） 标题标签、段落标签、水平线标签、换行标签、div/span标签、图像标签、链接标签、base标签、特殊字符标签、注释标签、文本格式化标签
HTML标签分类 在HTML页面中,带有"< >"符号的元素被称为HTML标签,如上面提到的 HTML.head.body都是HTML骨架结构标签.所谓标签就是放在&q ...
- day01【HTML基础】HTML表单【重点】、表单控件、水平线标签、段落和换行标签、超链接标签、图像标签、列表标签、div和span标签、 转义（实体）字符、 基本表格、合并表格
HTML 一 HTML概述 超文本标记语言(Hyper Text Markup Language) 作用:搭建基础网页 超文本:具有普通文本的特性,同时还可以加入图片.视频.超链接等等. 标记:即标签 ...
- R语言可视化面积图（area chart）移除轴标签与实际图形之间的空白区域实战：默认的面积图、移除轴标签与实际图形之间的空白区域
R语言可视化面积图(area chart)移除轴标签与实际图形之间的空白区域实战:默认的面积图.移除轴标签与实际图形之间的空白区域 目录
- php两个按钮左右怎么做,css布局两个button在同父标签中左右两侧分布的方法
本文主要介绍了css布局两个button在同父标签中左右两侧分布的方法,分享给大家,具体如下: 效果图 布局代码 提交 重置 style="float:right;width:50%&quo ...
- html:(8):span标签和q标签
使用<span>标签为文字设置单独样式 这一小节讲解<span>标签,我们对<em>.<strong>.<span>这三个标签进行一下总结: ...
- html img素材,html使用img标签和背景图片之间的区别
标签:标记 展示 target site 标签 加载完成 路径 背景 加载 1.加载问题 背景图片会等到html结构加载完成才开始加载img标签是网页结构的一部分,会在 ...
- CSS系列之美化网页/span标签和div标签/字体样式/文本样式
CSS系列之美化网页/span标签和div标签/字体样式/文本样式 01 span标签和div标签 span标签的作用 能让几个文字或者某个词语凸显出来 属于行内元素 div标签 属于块级元素 程序示 ...
- 林期苏曼属性标签编辑_标签打印软件如何打印一式两联标签
原标题:标签打印软件如何打印一式两联标签 这两天有小伙伴来咨询如何打印一式两联标签,标签大致内容就是一个序列号和和一个流水条码,大标签又分为6个部分,每部分上有两个相同的标签.而所谓的一式两联标签就是 ...
- html中可以有两个h1,在一个HTML中h1标签能出现几次？h1标签和标题标签
首页 > web前端 > html教程 > 正文 在一个HTML中h1标签能出现几次?h1标签和标题标签的差别是什么? 2018-08-29 10:57:28 本篇文章主要介绍了关于 ...
最新文章
- php看什么教程,PHP初学者适合看什么
- over partition by与group by 的区别
- mysql日期格式化季度_Mysql按周，按月，按日，按小时分组统计数据
- Java中包装类型和基本类型的使用场景(阿里开发规范)
- php上传文件简单类
- Python中匿名函数与内置高阶函数详解
- 干货 | ZooKeeper 源码和实践揭秘
- Javaslang 3.0之路
- 利用深度学习从大脑活动合成语言，应对人类语音挑战
- vue学习笔记-1-初步认识
- ThinkPHP一键检测ThinkPHP漏洞,漏洞检测工具
- UI设计师应聘面试攻略看这篇就够了
- 仙道服务器维护,【正式服】2月14日例行更新维护公告
- Python数据分析（Pandas）
- Python数据挖掘（2）简单的分类问题
- stm32控制半导体制冷器实现饮水机保温制冷功能
- 即有分期 提前还款手续费就是不在办理的时候告诉你
- Python 解析爬取的车次数据（12306）
- Python办公自动化｜一键生成数据分析报告
- 艾默生流量计校验功能