font-size = 0 的作用

小咪咪 2022-03-25 13:50 230阅读 0赞

问题的根源是 inline（a标签默认是display:inline） 和 inline-block (.list 设置的是 display:inline-block) 是内联布局，既然是内联那么就会受空白区域的影响。

这是像素级还原设计稿很有用的设置，因为元素节点有文本节点，在缩进代码时会占据宽度，这么说不好理解，演示如下：

HTML

<div class="box">  
  <div>1</div>  
  <div>2</div>  
  <div>3</div>  
</div>  
  
CSS

.box\{  
  width: 90px;  
  height: 60px;  
  border: 1px solid \#ccc;  
\}  
.box div\{  
  display: inline-block;  
  box-sizing: border-box;  
  font-size: 14px;  
  width: 30px;  
  border: 1px solid ;  
\}  
  
理论上box下面的三个div都是30px，刚好在一行显示，但是实际效果是这样的：

![è¿éåå¾çæè¿°][SouthEast]

这就是上文说到的原因，我们在box下添加 font-size:0; 再看看效果：

![è¿éåå¾çæè¿°][SouthEast 1]  
总结：

1、可以看到这才是我们想要的结果，因此在实际开发中，为了更好的还原设计稿，在父元素很有必要设置font-size:0，避免莫名其妙的间距。

2、这种情况的另一种解决方式：去掉空白部分。（不采用，例子如下：）

<div class="box"><div>1</div><div>2</div><div>3</div></div>

转：[https://blog.csdn.net/github\_38771368/article/details/73549381][https_blog.csdn.net_github_38771368_article_details_73549381]

[SouthEast]: /images/20220325/2a7251f9d9bf4cd4a6ddd7c885bbd4ca.png
[SouthEast 1]: /images/20220325/7e7a6ef8a2d24deda9156da96391ba3b.png
[https_blog.csdn.net_github_38771368_article_details_73549381]: https://blog.csdn.net/github_38771368/article/details/73549381

发表评论取消回复

表情：

评论列表（有 0 条评论，230人围观）

还没有评论，来说两句吧...

相关阅读

相关 Thread.sleep(0)的作用

Thread.sleep(0)的作用 Thread.Sleep(0)作用，就是“触发操作系统立刻重新进行一次CPU竞争”。竞争的结果也许是当前线程仍然获得CPU控制权，也

╰+攻爆jí腚メ/ 2022年11月10日 14:14/ 0 赞/ 161 阅读

相关 setTimeout延时0毫秒的作用

经常看到setTimeout延时0ms的javascript代码，感到很迷惑，难道延时0ms和不延时不是一个道理吗？后来通过查资料以及实验得出以下两个作用，可能还有作用我还不知

浅浅的花香味﹌/ 2022年06月13日 06:09/ 0 赞/ 205 阅读

相关 0欧姆电阻的作用

参考链接： 1，[0欧姆电阻的一些用处：总结的很好，有图有真相][0] 2，[百度百科：0欧姆电阻][0 1] -------------------- 1. 在

一时失言乱红尘/ 2022年05月30日 04:11/ 0 赞/ 174 阅读

相关 0欧姆电阻的作用

\---------------------------------------------------------------------------------------

分手后的思念是犯贱/ 2022年05月25日 07:05/ 0 赞/ 164 阅读

相关 [java]Sleep(0)的作用

我们可能经常会用到 Thread.Sleep 函数来使线程挂起一段时间。那么你有没有正确的理解这个函数的用法呢？思考下面这两个问题：假设现在是 2008-4-7 12:00

朱雀/ 2022年04月16日 06:26/ 0 赞/ 253 阅读

相关 0欧电阻作用

1、模拟地和数字地单点接地只要是地，最终都要接到一起，然后入大地。如果不接在一起就是"浮地"，存在压差，容易积累电荷，造成静电。地是参考0电位，所有电压都是参考地得出的

古城微笑少年丶/ 2022年03月29日 04:46/ 0 赞/ 237 阅读

相关 font-size = 0 的作用

问题的根源是 inline（a标签默认是display:inline）和 inline-block (.list 设置的是 display:inline-block) 是内联

小咪咪/ 2022年03月25日 13:50/ 0 赞/ 231 阅读

相关 sleep(0)作用

假设现在是 2008-4-7 12:00:00.000，如果我调用一下 Thread.Sleep(1000) ，在 2008-4-7 12:00:01.000 的时候，这个线程

Dear 丶/ 2022年03月09日 07:12/ 0 赞/ 205 阅读

相关 0R电阻作用

① 、在高频信号下，充当电感或电容（与外部电路特性有关）。作为电感用，主要是解决EMC问题，如地与地（连接不同的类型的GND，0欧电阻相当于很窄的电流通路，能够有效地限

左手的ㄟ右手/ 2021年12月16日 03:39/ 0 赞/ 255 阅读

相关 js移动端自适应动态设置html的fontsize

JS设计移动端页面时会遇到自适应问题，大多数都知道用rem来设置页面的比例大小，下面就来说几种常见的html中的fontsize设置方法： 1.使用flexible.js插件

不念不忘少年蓝@/ 2021年07月27日 01:51/ 0 赞/ 376 阅读