记录--说一说css的font-size: 0
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助
平常我们说的
font-size：0；就是设置字体大小为0对吧，但是它的用处不仅仅如此哦，它还可以消除子行内元素间额外多余的空白！
问题描述？
是否出现过当多个img标签平铺的时候，会出现几个像素的间距？就像这样（为了醒目加了个红色的框框）
是什么原因造成的呢？
大家都知道img是行内元素，比如当我们的标签换行的时候，回车符会解析一个空白符，所以这是造成会有间距的原因之一。
当然喽，不仅仅是img，包括其他的一些常见的行内元素，比如span标签回车换行的效果，同样也会间隙，当然如果是缩进、空格等字符同样也会产生空白间隙，导致元素间产生多余的间距
<span>背景图</span>
<span>背景图</span>
<span>背景图</span>
<span>背景图</span>
<img class="item-img" src="./src/assets/login-bg.png" alt="背景图" >
<img class="item-img" src="./src/assets/login-bg.png" alt="背景图" >
<img class="item-img" src="./src/assets/login-bg.png" alt="背景图" >
如何解决呢？
那我们首先想到取消换行、空格...
既然是因为标签换行了引起的，那么我们就取消换行、空格等试一试。
<span>背景图</span><span>背景图</span><span>背景图</span><span>背景图</span>
<img class="item-img" src="./src/assets/login-bg.png" alt="背景图" ><img class="item-img" src="./src/assets/login-bg.png" alt="背景图" ><img class="item-img" src="./src/assets/login-bg.png" alt="背景图" >
证明方法还是有用的～ 那还有没有其他的方法解决呢，那这个时候可以借助font-size:0来用一用。
如何使用font-size: 0 解决呢？
利用font-size:0消除子行内元素间额外多余的空白,需要在父元素上添加font-size:0。
是不是就解决了呀？
看一个完整的完整demo效果
当然需要注意一下：
设置
font-size: 0时，子元素必须指定一个font-size大小，否则文本内容不会显示哦
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>demo</title>
<style>
/*************************css代码***********************/
ul {
margin: 20px;
display: flex;
gap: 20px;
}
.item {
width: 300px;
height: 200px;
padding: 20px;
border-radius: 10px;
background: #fff;
overflow: hidden;
font-size: 0;
box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}
.item-img {
width: 100%;
height: 175px;
object-fit: cover;
border-radius: 5px;
}
.item-text {
color: #333;
font-size: 14px;
}
span {
background-color: red;
padding: 10px;
}
</style>
</head>
<body> <ul>
<li class="item">
<img class="item-img" src="./src/assets/login-bg.png" alt="背景图" ><p class="item-text">《好看的背景图》</p>
</li>
<li class="item">
<img class="item-img" src="./src/assets/login-bg.png" alt="背景图" >
<p class="item-text">《好看的背景图》</p>
</li>
<li class="item">
<img class="item-img" src="./src/assets/login-bg.png" alt="背景图" >
<p class="item-text">《好看的背景图》</p>
</li>
<li class="item">
<img class="item-img" src="./src/assets/login-bg.png" alt="背景图" >
<p class="item-text">《好看的背景图》</p>
</li>
</ul>
</body>
</html>
本文转载于:
https://juejin.cn/post/7260752483055878204
如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。
记录--说一说css的font-size: 0的更多相关文章
- hiho #1288 微软2016.4校招笔试题 Font Size
#1288 : Font Size 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 Steven loves reading book on his phone. The ...
- CSS 字体(font)实例
CSS 字体(font)实例CSS 字体属性定义文本的字体系列.大小.加粗.风格(如斜体)和变形(如小型大写字母).CSS 字体系列在 CSS 中,有两种不同类型的字体系列名称: 通用字体系列 - 拥 ...
- LaTeX ：font size 修改字体大小的几种方式
调整字体大小的几种方式,大小依次增大,具体如下: \tiny \scriptsize \footnotesize \small \normalsize \large \Large \LARGE \hu ...
- GetPropInfo Font Size
设置font size,遍历所有控件,有的控件没有font属性,所以要用GetPropInfo判断 if (GetPropInfo(cmp, "font")) function G ...
- unity UGUI text font size对性能影响较大
Font Size对ugui text的性能影响非常大. <Cube Duck Run>在itouch5上测试是很流畅的,但是在iphone5上测试,在game over后显示历史最高分时 ...
- TP5.1：将外部资源引入到框架中（css/js/font文件）
为了让我们的框架形式变得更加好看,我们需要加入Bootstrap和Jq文件到框架中 1.通过Bootstrap和jq官网进行相关文件的下载 (1)Bootstrap下载地址:https://v3.bo ...
- cordova 导致css中绝对定位top:0会被顶到视图之外
IOS7+ webview全屏导致状态栏悬浮在页面上 解决方案:打开 ios项目/classes/MainViewController.m,修改viewWillAppear方法 - (void)vie ...
- empty()和size() == 0有区别吗
empty()和size() 这里说的empty()和size()都是STL的容器中提供的接口,分别用来判断当前容器是否为空和获取当前包含的元素个数 区别 其实按道理来说两者应该是相等的,而且STL容 ...
- mariadb:InnoDB: Error: log file ./ib_logfile0 is of different size 0 5242880 bytes
mariadb 启动中 InnoDB: Error: log file ./ib_logfile0 is of different size 0 起因:线上正在运行的系统,因为需要调整性能,变更了my ...
- java.util.concurrent.RejectedExecutionException: Task java.util.concurrent.FutureTask@1f303192 rejected from java.util.concurrent.ThreadPoolExecutor@11f7cc04[Terminated, pool size = 0, active threads
java.util.concurrent.RejectedExecutionException: Task java.util.concurrent.FutureTask@1f303192 rejec ...
随机推荐
- 从零开始的 dbt 入门教程 （dbt core 开发进阶篇）
引 在上一篇文章中,我们花了专门的篇幅介绍了 dbt 更多实用的命令,那么我们继续按照之前的约定来聊 dbt 中你可能会遇到的疑惑以及有用的概念,如果你是 dbt 初学者,我相信如下知识点一定会对你有 ...
- NC20573 [SDOI2011]染色
题目链接 题目 题目描述 给定一棵有n个节点的无根树和m个操作,操作有2类: 1.将节点a到节点b路径上所有点都染成颜色c: 2.询问节点a到节点b路径上的颜色段数量(连续相同颜色被认为是同一段),如 ...
- 51单片机(STC89C52)的中断和定时器
STC89C51/STC89C52 Timer 内部不带振荡源, 必须外接晶振 采用11.0592MHz,或22.1184MHz,可方便得到串口通讯的标准时钟. STC89和STC90系列为12T, ...
- Windows下，SpringBoot JDBC无法连接的问题
问题症状 在Win7和Win10下启动时均会出现下面的错误,但是在OSX和Linux下没问题 com.mysql.jdbc.exceptions.jdbc4.CommunicationsExcepti ...
- PLSQL编译存储过程无响应
解决方法如下: 1:查V$DB_OBJECT_CACHE SELECT * FROM V$DB_OBJECT_CACHE WHERE name='CRM_LASTCHGINFO_DAY' AND LO ...
- Linux中作业控制命令
开门见山,最近.NET劝退师要在linux上写些长时间运行的脚本,获取Azure BlobStorage存储的数据. 记录一下Linux中后台执行作业的命令. Linux作业 作业(Job)是shel ...
- 【C# .Net】List循环add，出现数据相同现象? 引发对引用类型和值类型的底层逻辑的思考。
赶项目时发现了一个问题,定义一个引用对象,如果在循环外定义对象,在循环内list.add(object).最后的结果却是所有的对象值都是一样的,即每add一次,都会把之前的数据覆盖. 解决方法:把对象 ...
- .NET 链接数据库：证书链是由不受信任的颁发机构颁发的
错误信息 证书链是由不受信任的颁发机构颁发的 错误环境 .NET web.config链接数据库(发布到服务)时报错 解决方法 下面配置标红部分在你的代码配置中增加或者修改 <add name= ...
- 你不得不知道的 MySQL 优化原理
目录 MySQL逻辑架构 MySQL查询过程 客户端/服务端通信协议 查询缓存 查询优化 查询执行引擎 返回结果给客户端 总结 性能优化建议 Scheme设计与数据类型优化 创建高性能索引 索引相关的 ...
- Unity3D常用方法
1.StartCoroutine(Thread1()) 启动协程运行Thread1()方法. 注意是协程,不是线程,详情见:https://www.jianshu.com/p/6d923cb0c900 ...