记录--说一说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 ...
随机推荐
- 架构设计理念&模型
理念 今天我们还需要关注 DDD 吗?https://www.infoq.cn/article/should-we-focus-on-ddd 事件风暴:https://en.wikipedia.org ...
- Kakfa系列丛书推荐之《深入理解Kafka：核心设计与实践原理》
pdf格式文档下载见下文 编者推荐 本书从Kafka的基本概念入手,主要从生产端.消费端.服务端等3个方面进行全面的陈述,主要内容包括Kafka的基本使用方式.生产者客户端的使用.消费者客户端的使用. ...
- 从零开始的react入门教程（一），让我们从hello world开始
壹 ❀ 引 按照之前的计划,从这个月开始,我将由浅至深更新一些react相关的技术博文.由于我目前也是react新手一名,所以文章本质上也算自己学习历程的记录,倘若这些文章能帮助到一些人那就再好不过了 ...
- NC20875 舔狗舔到最后一无所有
题目链接 题目 题目描述 作为队伍的核心,forever97很受另外两个队友的尊敬. Trote_w每天都要请forever97吃外卖,但很不幸的是宇宙中心forever97所在的学校周围只有3家fo ...
- Spring Boot 加载外部配置文件
Spring Boot 允许你从外部加载配置,这样的话,就可以在不同的环境中使用相同的代码.支持的外部配置源包括:Java属性文件.YAML文件.环境变量.命令行参数. 用@Value注解可以将属性值 ...
- 盘点 Udemy 上最受欢迎的免费编程课程
之前给大家推荐过一些油管上的免费学习资源,如果您还没有看过的话可以点击这里前往. 今天再给大家推荐一批Udemy上超高质量并且免费的编程课程,有需要的小伙伴可以学起来了. 1. JavaScript ...
- 4.1k Star！全面的C#/.NET/.NET Core学习、工作、面试指南
C#/.NET/.NET Core 学习.工作.面试指南 让现在的自己不再迷茫 . GitHub 开源地址:https://github.com/YSGStudyHards/DotNetGuide D ...
- 记录一个错误：Unable to find a match: python-dev
今天尝试在Linux下运行一个Python项目,在安装requirements.txt时报错 执行命令如下: [root@VM-16-8-centos cve-search]# pip3 instal ...
- 名校AI课推荐 | MIT6.S191《深度学习导论》
"连续开设5年,对新手友好.易于上手,参加课程的多数学生来自非计算机科学领域--" 推荐一门AI课程--MIT官方深度学习入门课程6.S191<深度学习导论(2022)> ...
- Hello-FPGA CoaXPress 2.0 FPGA DEVICE IP Core Demo
Hello-FPGA CoaXPress 2.0 Device FPGA IP Core Demo 1 说明 本手册针对Helllo-FPGA的CoaXPress 2.0 DEVICE FPG ...