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

平常我们说的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. 【译】.NET 8 网络改进（二）

    原文 | Máňa,Natalia Kondratyeva 翻译 | 郑子铭 修改 HttpClient 日志记录 自定义(甚至简单地关闭)HttpClientFactory 日志记录是长期请求的功能 ...

  2. Executors.newFixedThreadPool(int nThreads)存在的缺陷

    一般来讲是不推荐直接使用JAVA提供的Executors类来初始化线程池,如果有需要可以自行通过ThreadPoolExecutor来封装进行初始化. 可以用newFixedThreadPool(in ...

  3. 走出人生的舒适区，告别 CRUD

    ​舒适区(Comfort zone),指的是一个人所处的一种环境的状态,和习惯的行动,人会在这种安乐窝的状态中感到舒适并且缺乏危机感. 工作中的舒适区 很多人工作也每天很累很辛苦,程序员每天都在加班加 ...

  4. Gerrit 笔记

    Gerrit 通过git push后增加一个中间状态, 来完成代码审批环节, 因此在git commit的时候增加了一个change id, 并且push到定制的target, 在push之后, 需要 ...

  5. 【framework】Task简介

    1 前言 ​ Task 即任务,一个 Task 对应一个 Activity,其父容器为 TaskStack,子容器为 AppWindowToken. ​ 关于其父类及祖父类的介绍,见 → Window ...

  6. maven打包更改版本号

    引入依赖 <plugin> <groupId>org.codehaus.mojo</groupId> <artifactId>versions-mave ...

  7. SetWindowHookEx的复习

    #include <Windows.h> #include <iostream> using namespace std; HHOOK keyboardHook; LRESUL ...

  8. xHook 源码解析

    xHook 是爱奇艺开源的一个PLT Hook 框架 项目地址: https://github.com/iqiyi/xHook 该项目实现了 PTL/GOT Hook PTL hook 的本质是修改内 ...

  9. 【Android 抓包对抗】代理检查绕过

    1. 安装apk,点进去发现一点就挂 2. apk 拖入到jadx中观察,发现多出检查,一旦满足条件就会退出 .... if (((ConnectivityManager) getSystemServ ...

  10. 解决Linux平台Selenium截图中文乱码问题

    通常情况下,像CentOS这样的Linux发行版默认是缺少中文字体的,所以在执行Selenium截图时,如果目标网页中有中文,则截图后中文将会显示为方块一样的乱码. 解决办法:手动安装中文字体即可. ...