font-size:0;

柔光的暖阳◎ 2021-10-09 03:16 216阅读 0赞

# [ont-size:0的作用][ont-size_0] #

看到过font-size:0这个设置，不明白为何这样操作，后来研究一下才明白：这是像素级还原设计稿很有用的设置，因为元素节点有文本节点，在缩进代码时会占据宽度，这么说不好理解，演示如下：

html：

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

css：

![复制代码][copycode.gif]

.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 ;
    }

![复制代码][copycode.gif]

理论上box下面的三个div都是30px，刚好在一行显示，但是实际效果是这样：

![1098079-20170209145030213-330247522.png][]

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

![1098079-20170209145334791-2090940407.png][]

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

[ont-size_0]: http://www.cnblogs.com/guagnxu/p/6382163.html
[copycode.gif]: /images/20211009/61e8a0fd5e2d4b549b5e445573c3debf.png
[1098079-20170209145030213-330247522.png]: /images/20211009/7ff132ff4cea4e8da15053b6fd6233dd.png
[1098079-20170209145334791-2090940407.png]: /images/20211009/83266ff1e2a245f39ef8ee0cfe6cb180.png

发表评论取消回复

表情：

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

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

相关阅读

相关 0 0 0 ’\0’ 区别

ASCII码值0 0 0,0 、 '0' 、 "0" 、 ’\\0’ 区别 ① ‘0’ 代表字符0 ，对应ASCII码值为 0x30 (也就是十进制 48) ② '\\0

淡淡的烟草味﹌/ 2023年09月23日 22:52/ 0 赞/ 68 阅读

相关 java获取IP为0:0:0:0:0:0:0:1的情况

0:0:0:0:0:0:0:1是ipv6的表现形式，对应ipv4来说相当于127.0.0.1，也就是本机访问时是通过 localhost 来访问，用java获取ip地址可能

「爱情、让人受尽委屈。」/ 2022年12月29日 12:47/ 0 赞/ 287 阅读

相关 localhost、127.0.0.1和0.0.0.0的区别

[彻底明白ip地址，区分localhost、127.0.0.1和0.0.0.0][ip_localhost_127.0.0.1_0.0.0.0] [ip_localhost

绝地灬酷狼/ 2022年12月22日 01:00/ 0 赞/ 328 阅读

相关 [Vue][Sass]配置在不同宽度时的html.style.fontsize值，并通过rem适配

App.vue中： <template> <div id="app"> <span class="text">ABCDEFG</span>

深藏阁楼爱情的钟/ 2022年12月03日 02:23/ 0 赞/ 134 阅读

相关 0,'\0','0'

include <iostream> using namespace std; int main(void) { cout<<__FILE__<<

清疚/ 2022年09月18日 00:55/ 0 赞/ 156 阅读

相关 getRemoteAddr()获得的是0:0:0:0:0:0:0:1

转自：https://jingyan.baidu.com/article/295430f19370470c7e005021.html 第一步：如图所示，我使用getRequ

r囧r小猫/ 2022年05月27日 07:58/ 0 赞/ 162 阅读

相关 localhost 和 0.0.0.0 区别

今天在研究 webpack-dev-server 配置 host 时，看到手册中这样的一句话： > 指定使用一个 host，默认是 `localhost`，如果你希望服务器外

刺骨的言语ヽ痛彻心扉/ 2022年04月17日 06:53/ 0 赞/ 414 阅读

相关 127 0 0 1和0 0 0 0

分享一下我老师大神的人工智能教程！零基础，通俗易懂！[http://blog.csdn.net/jiangjunshow][http_blog.csdn.net_jiangju

水深无声/ 2022年04月16日 05:53/ 0 赞/ 240 阅读

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

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

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

相关 Failed to initialize a channel. Closing: [id: 0x1bd7c1d4, /0:0:0:0:0:0:0:1:56640 =＞ /0:0:0:0:0:0:0:1

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

淩亂°似流年/ 2021年06月10日 20:39/ 0 赞/ 1531 阅读