CSS font-size: 0去除内联元素空白间隙
2024-08-31 10:57:26
我们在编写HTML标签的时候，通常会使用换行，缩进来保证代码的可读性。同时，在编写CSS样式的时候，也会需要把一些元素设置为inline或inline-block。这样一来，有时在页面中会出现意外的空白间隙导致页面视图与本意不符。
先来了解一下出现空白间隙的原因吧！因为内联元素默认排版中有空白间隙，以此来把每一个内联元素独立分开，这里的空白间隙也就是空白的文本节点，在缩进代码时会占据宽度，所以就导致了意外的空白间隙。
那么接下来为大家提供三种解决方法
1.去掉两个HTML标签中的空白，也就是去掉换行，使两个标签紧紧挨在一起，去除了标签中的空白文本节点，也就去除了空白间隙。
这种方法通常可以解决问题，但同时会使代码可读性下降，降低代码整洁度，偶尔使用影响不会太大。
2.为元素设置letter-spacing属性，letter-spacing属性允许使用负值，这会让字母之间挤得更紧。
这种方法也可以算是一种解决方式，不过更多的还是用来设置字符的间距。
3.为内联元素的父元素添加font-size属性，并设置为0，找到需要清除空白的内联元素，将内联元素的父元素的font-size属性设置为0就可以了，不过别忘了在内联元素中重新设置对应的font-size值。
这个方法是最推荐的，也是最常用的方法，可以很好处理空白间隙问题。
最新文章
- Windows Server 2008 R2 配置AD(Active Directory)域控制器
- EF CodeFirst 关系配置
- Java之反射机制
- 客户端安全-xss-2解决方案
- 试用版SQL Server 2008 R2 提示评估期已过
- 读Windows编程
- lintcode:线段树的查询
- 基于visual Studio2013解决面试题之1002公共子串
- Dev GridControl GridView 属性大全[中文解释]
- JAVA面向对象-----抽象类注意细节
- Spring 数据处理框架的演变
- ELK日志分析方案
- 项目部署到服务器上之后request.getRemoteAddr()为什么获取的都是本地地址
- WIN10下Prolific USB-to-Serial Comm Port驱动
- Python——socketsever模块
- Xcode 插件优缺点对照（推荐 20 款插件）
- mac通过路径找到对应的文件夹
- Jasper打印示例
- Vue的声明周期
- Linux 串口、usb转串口驱动分析(2-2) 【转】