记录--说一说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

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/28108.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

leetcode 图算法小结

文章目录 1 DFS和BFS797. 所有可能的路径200. 岛屿数量 1 DFS和BFS 深度优先遍历一般采用回溯算法进行解决。回溯算法&#xff0c;其实就是dfs的过程。 void dfs(参数) {处理节点dfs(图&#xff0c;选择的节点); // 递归回溯&#xff0c;撤销处理结果 }广度优先搜索理解为层次…

Qt小项目贪吃蛇实线,主要掌握定时器、信号与槽、按键事件、绘制事件、坐标运算、随机数生成等

Qt小项目贪吃蛇实线&#xff0c;主要掌握定时器、信号与槽、按键事件、绘制事件、坐标运算、随机数生成等 Qt 贪吃蛇演示QWidget 绘制界面项目源文件 注释清晰widget.hwidget.cpp 拓展QTimerQKeyEventQRectFQPointFQPainterQIcon Qt 贪吃蛇演示 QWidget 绘制界面 项目源文件 注…

开关电源控制--电流纹波率

什么是电流纹波率 电流纹波率&#xff08;Current Ripple Ratio&#xff09;是开关电源控制中一个重要的参数。它表示输出电流的波动程度&#xff0c;通常以百分比表示。 当电流纹波率为0.4时&#xff0c;意味着输出电流的波动相对较小&#xff0c;波动范围约为输出电流的0.4…

【Java split】split() 函数分割字符串出现空格的问题以及带转义符号的字符串分割为数组(106)

本文重点&#xff1a; 1.带转义符号的字符串转数组格式&#xff1b; 2.split() 函数分割空字符串后数组中元素前出现空格&#xff1b; 3.split() 函数分割需注意的问题&#xff1b; 测试代码&#xff1a; import java.util.ArrayList; import java.util.Arrays; import java.u…

Python 程序设计入门(013)—— 字典的操作(2):字典的常用操作总结

Python 程序设计入门&#xff08;013&#xff09;—— 字典的操作&#xff08;2&#xff09;&#xff1a;字典的常用操作总结 目录 Python 程序设计入门&#xff08;013&#xff09;—— 字典的操作&#xff08;2&#xff09;&#xff1a;字典的常用操作总结一、获取字典中元素…

JUC并发编程之CAS

目录 1.什么是CAS 1.1 CAS的定义 1.2 CAS的应用场景 2. CAS的原理 2.1 比较和交换操作 2.2 CAS的实现原理 2.3 CAS的ABA问题及解决方案 3. Java中的CAS 3.1 java.util.concurrent.atomic 包 3.2 AtomicInteger 与 AtomicLong 3.3 ABA问题的解决&#xff1a;AtomicSta…

JavaScript 原型链解析,宏任务和微任务

目录 什么是原型链&#xff1f; 原型与构造函数 原型链的工作原理 实例&#xff1a;理解原型链 宏任务&#xff08;Macro Task&#xff09; 微任务&#xff08;Micro Task&#xff09; 什么是原型链&#xff1f; JavaScript 是一门基于原型的语言&#xff0c;而原型链是…

C# 有效的字母异位词

242 有效的字母异位词 给定两个字符串 和 &#xff0c;编写一个函数来判断 是否是 的字母异位词。stts 注意&#xff1a;若 和 中每个字符出现的次数都相同&#xff0c;则称 和 互为字母异位词。stst 示例 1: 输入: s “anagram”, t “nagaram” 输出: true 示例 2: 输…

11. Redis基础知识

文章目录 一、概述二、数据类型STRINGLISTSETHASHZSET 三、数据结构字典跳跃表 四、使用场景计数器缓存查找表消息队列会话缓存分布式锁实现其它 五、Redis 与 Memcached数据类型数据持久化分布式内存管理机制 六、键的过期时间七、数据淘汰策略八、持久化RDB 持久化AOF 持久化…

Netty:ByteBuf的最大快速可以写入字节数

说明 通过io.netty.buffer.ByteBuf的maxFastWritableBytes()函数可以得到最大快速可写入字节数。最大快速可写入字节数表示没有内部再分配内存的情况下肯定可以写入的最大字节数。maxFastWritableBytes() capacity&#xff08;容量&#xff09; - writerIndexwritableBytes()…

【C++从0到王者】第十八站:手把手教你写一个简单的优先级队列

文章目录 一、优先级队列简介二、优先级队列的接口说明1.基本介绍及其使用2.构造函数3.求数组中第k个最大的元素 三、手撕优先级队列四、仿函数1.仿函数介绍2.优先级队列添加仿函数3.需要自己写仿函数的情形 五、优先级队列完整代码 一、优先级队列简介 优先级队列是一种容器适…

Java经典面试题总结(一)

Java经典面试题总结&#xff08;一&#xff09; 题一&#xff1a;Java编译运行原理题二&#xff1a;JDK&#xff0c;JVM&#xff0c;JRE三者之间的关系题三&#xff1a;谈一下对冯诺依曼体系的了解题四&#xff1a;重载与重写的区别题五&#xff1a;拆箱装箱是指什么&#xff1…

Diffusion-GAN: Training GANs with Diffusion

目录 Abstract 1. Introduction 2. Preliminaries: GANs and diffusion-based generative models 3. Diffusion-GAN: Method and Theoretical Analysis 3.1 Instance noise injection via diffusion 3.2 Adversarial Training 3.3 Adaptive diffffusion 3.4 Theoretica…

微服务技术栈

微服务技术栈是指在开发和构建微服务架构时使用的一组技术和工具。微服务架构是一种软件开发模式&#xff0c;将一个大型应用程序拆分为一组小型、自治的服务&#xff0c;每个服务独立部署、可独立扩展&#xff0c;并通过轻量级的通信机制进行互相协作。 微服务技术栈通常包括…

Netty 入门指南

文章目录 前言Netty介绍Netty发展历程Netty核心组件实现HTTP服务器总结 前言 上文《BIO、NIO、IO多路复用模型详细介绍&Java NIO 网络编程》介绍了几种IO模型以及Java NIO&#xff0c;了解了在网络编程时使用哪种模型可以提高系统性能及效率。即使Java NIO可以帮助开发人员…

44.实现爱尔兰B公式计算并输出表格(matlab程序)

1.简述 1.话务量定义 话务量指在一特定时间内呼叫次数与每次呼叫平均占用时间的乘积。 话务量反映了电话负荷的大小&#xff0c;与呼叫强度和呼叫保持时间有关。呼叫强度是单位时间内发生的呼叫次数&#xff0c;呼叫保持时间也就是占用时间。 话务量计算方法 话务量公式为…

[CKA]考试之集群故障排查 – kubelet故障

由于最新的CKA考试改版&#xff0c;不允许存储书签&#xff0c;本博客致力怎么一步步从官网把答案找到&#xff0c;如何修改把题做对&#xff0c;下面开始我们的 CKA之旅 题目为&#xff1a; Task 一个名为wk8s-node-0的节点状态为NotReady&#xff0c;让其他恢复至正常状态…

c++调用ffmpeg api录屏 并进行udp组播推流

代码及工程见https://download.csdn.net/download/daqinzl/88155241 开发工具&#xff1a;visual studio 2019 播放&#xff0c;采用ffmpeg工具集里的ffplay.exe, 执行命令 ffplay udp://224.1.1.1:5001 主要代码如下: #include "pch.h" #include <iostream>…

RANSAC算法在Python中的实现与应用探索:线性拟合与平面拟合示例

第一部分:RANSAC算法与其应用 在我们的日常生活和多个领域中,如机器学习,计算机视觉,模式识别等,处理数据是一个非常重要的任务。尤其是当我们需要从嘈杂的数据中获取信息或拟合模型时。有时候,数据可能包含异常值或噪声,这可能会对我们的结果产生重大影响。为了解决这…

【搜索】DFS剪枝与优化

算法提高课笔记 目录 小猫爬山题意思路代码 数独题意思路代码 木棒题意思路代码 生日蛋糕题意思路代码 剪枝是什么意思呢&#xff1f; 我们知道&#xff0c;不管是内部搜索还是外部搜索&#xff0c;都可以形成一棵搜索树&#xff0c;如果将搜索树全部遍历一遍&#xff0c;效率…