记录–说一说css的font-size: 0

  • 记录–说一说css的font-size: 0已关闭评论
  • 77 次浏览
  • A+
所属分类:Web前端
摘要

平常我们说的font-size:0;就是设置字体大小为0对吧,但是它的用处不仅仅如此哦,它还可以消除子行内元素间额外多余的空白!


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

记录--说一说css的font-size: 0

平常我们说的font-size:0;就是设置字体大小为0对吧,但是它的用处不仅仅如此哦,它还可以消除子行内元素间额外多余的空白!

问题描述?

是否出现过当多个img标签平铺的时候,会出现几个像素的间距?就像这样?(为了醒目加了个红色的框框)

记录--说一说css的font-size: 0

是什么原因造成的呢?

大家都知道img是行内元素,比如当我们的标签换行的时候,回车符会解析一个空白符,所以这是造成会有间距的原因之一。

当然喽,不仅仅是img,包括其他的一些常见的行内元素,比如span?标签回车换行的效果,同样也会间隙,当然如果是缩进、空格等字符同样也会产生空白间隙,导致元素间产生多余的间距

记录--说一说css的font-size: 0

 

    <span>背景图</span>     <span>背景图</span>     <span>背景图</span>     <span>背景图</span>     <img class="item-img" src="./src/assets/login-bg.png" alt="记录--说一说css的font-size: 0" alt="背景图" >     <img class="item-img" src="./src/assets/login-bg.png" alt="记录--说一说css的font-size: 0" alt="背景图" >     <img class="item-img" src="./src/assets/login-bg.png" alt="记录--说一说css的font-size: 0" alt="背景图" >

如何解决呢?

那我们首先想到取消换行、空格...

既然是因为标签换行了引起的,那么我们就取消换行、空格等试一试。

记录--说一说css的font-size: 0

<span>背景图</span><span>背景图</span><span>背景图</span><span>背景图</span> <img class="item-img" src="./src/assets/login-bg.png" alt="记录--说一说css的font-size: 0" alt="背景图" ><img class="item-img" src="./src/assets/login-bg.png" alt="记录--说一说css的font-size: 0" alt="背景图" ><img class="item-img" src="./src/assets/login-bg.png" alt="记录--说一说css的font-size: 0" alt="背景图" >

证明方法还是有用的~ 那还有没有其他的方法解决呢,那这个时候可以借助font-size:0来用一用。

如何使用font-size: 0 解决呢?

利用font-size:0消除子行内元素间额外多余的空白,需要在父元素上添加font-size:0

记录--说一说css的font-size: 0

是不是就解决了呀?

看一个完整的完整demo效果

记录--说一说css的font-size: 0

当然需要注意一下:

设置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="记录--说一说css的font-size: 0" alt="背景图" ><p class="item-text">《好看的背景图》</p>     </li>     <li class="item">       <img class="item-img" src="./src/assets/login-bg.png" alt="记录--说一说css的font-size: 0" alt="背景图" >       <p class="item-text">《好看的背景图》</p>     </li>     <li class="item">       <img class="item-img" src="./src/assets/login-bg.png" alt="记录--说一说css的font-size: 0" alt="背景图" >       <p class="item-text">《好看的背景图》</p>     </li>     <li class="item">       <img class="item-img" src="./src/assets/login-bg.png" alt="记录--说一说css的font-size: 0" alt="背景图" >       <p class="item-text">《好看的背景图》</p>     </li>   </ul> </body> </html>

本文转载于:

https://juejin.cn/post/7260752483055878204

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

 记录--说一说css的font-size: 0