这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助

平常我们说的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的更多相关文章

  1. hiho #1288 微软2016.4校招笔试题 Font Size

    #1288 : Font Size 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 Steven loves reading book on his phone. The ...

  2. CSS 字体(font)实例

    CSS 字体(font)实例CSS 字体属性定义文本的字体系列.大小.加粗.风格(如斜体)和变形(如小型大写字母).CSS 字体系列在 CSS 中,有两种不同类型的字体系列名称: 通用字体系列 - 拥 ...

  3. LaTeX ：font size 修改字体大小的几种方式

    调整字体大小的几种方式,大小依次增大,具体如下: \tiny \scriptsize \footnotesize \small \normalsize \large \Large \LARGE \hu ...

  4. GetPropInfo Font Size

    设置font size,遍历所有控件,有的控件没有font属性,所以要用GetPropInfo判断 if (GetPropInfo(cmp, "font")) function G ...

  5. unity UGUI text font size对性能影响较大

    Font Size对ugui text的性能影响非常大. <Cube Duck Run>在itouch5上测试是很流畅的,但是在iphone5上测试,在game over后显示历史最高分时 ...

  6. TP5.1：将外部资源引入到框架中（css/js/font文件）

    为了让我们的框架形式变得更加好看,我们需要加入Bootstrap和Jq文件到框架中 1.通过Bootstrap和jq官网进行相关文件的下载 (1)Bootstrap下载地址:https://v3.bo ...

  7. cordova 导致css中绝对定位top:0会被顶到视图之外

    IOS7+ webview全屏导致状态栏悬浮在页面上 解决方案:打开 ios项目/classes/MainViewController.m,修改viewWillAppear方法 - (void)vie ...

  8. empty()和size() == 0有区别吗

    empty()和size() 这里说的empty()和size()都是STL的容器中提供的接口,分别用来判断当前容器是否为空和获取当前包含的元素个数 区别 其实按道理来说两者应该是相等的,而且STL容 ...

  9. 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 ...

  10. 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 ...

随机推荐

  1. [JVM] Java内存分配

    Java内存分配 程序计数器 程序计数器是一块较小的内存区域,作用可以看做是当前线程执行的字节码的位置指示器.分支.循环.跳转.异常处理和线程恢复等基础功能都需要依赖这个计算器来完成. 虚拟机栈 虚拟 ...

  2. ASP.NET Core 配置 - 创建自定义配置提供程序

    ASP.NET Core 配置 - 创建自定义配置提供程序 在本文中,我们将创建一个自定义配置提供程序,从数据库读取我们的配置.我们已经了解了默认配置提供程序的工作方式,现在我们将实现我们自己的自定义 ...

  3. NC22544 车站

    题目链接 题目 题目描述 一个国家有n个城市,有n-1条道路连接,保证联通.还有m条铁路,从1~m编号,第i条铁路是从ui到vi的简单路径,多次询问一段区间的铁路的车站. 一个点可以作为区间[L,R] ...

  4. Wireguard笔记(三) lan-to-lan子网穿透和多网段并存

    目录 Wireguard笔记(一) 节点安装配置和参数说明 Wireguard笔记(二) 命令行操作 Wireguard笔记(三) lan-to-lan子网穿透和多网段并存 多 Wireguard 服 ...

  5. Doris Fe在Mac上搭建开发环境踩坑记录

    1. 拉取代码到本地 git clone https://github.com/apache/doris.git 2. 参考Doris的文档,但别全信(信了你就上当了) 参考第一篇 https://d ...

  6. Mqtt开发笔记：Mqtt服务器搭建

    若该文为原创文章,未经允许不得转载原博主博客地址:https://blog.csdn.net/qq21497936原博主博客导航:https://blog.csdn.net/qq21497936/ar ...

  7. FFmpeg开发笔记（十一）：ffmpeg在移植到海思HI35xx平台之将ffmpeg库引入到sample的demo中

    前言   上一篇交叉编译了ffmpeg的海思版本,使用交叉编译的qt的ffmpeg播放器在海思上播放,本片是将ffmpeg的环境添加进海思的sample环境中.   在海思sample中引入ffmpe ...

  8. Qt开发Activex笔记（三）：C#调用Qt开发的Activex控件

    若该文为原创文章,转载请注明原文出处本文章博客地址:https://blog.csdn.net/qq21497936/article/details/113789727 长期持续带来更多项目与技术分享 ...

  9. timeit测试函数执行时间

    def list_append(): l = [] for i in range(5000): l.append(i) def list_insert(): l = [] for i in range ...

  10. Celery异步处理任务时遇到的错误ValueError: not enough values to unpack (expected 3, got 0)

    开启celery异步,终端命令: celery -A celery_tasks.main worker -l info 如果上面运行后,发送短信码的时候没有报如下错误: ValueError: not ...