CSS里面的font-size我们都知道是用来设置字体大小的,就不赘言了。但是有的时候我们可能会看到这样的写法:“font-size: 0;”这是啥意思?用处何在呢?先来看下面的例子:
HTML结构很少:
<div class="div0"> <div class="div1">div1</div> <div class="div2">div2</div> <div class="div3">div3</div><div class="div4">div4</div><div class="div5">div5</div> </div>
CSS:
div{ width: 100px; height:100px; display: inline-block; font-size: 14px; } .div0{ margin-top: 40px; width: 700px; height:200px; background-color: orange; } .div1{ background-color: grey; } .div2{ background-color: green; } .div3{ background-color: purple; } .div4{ background-color: red; } .div5{ background-color: yellow; }
什么效果呢?
可以看出来div1和div2和div3之间都有点小间隙,这是因为html结构中div换行写了,后边没有换行的就不存在这个间隙的问题。但是div我们是要用来放其他标签的,大部分时候会有很多内容,怎么可能不换行书写呢。所以呢,为了解决当div的属性display为inline-block时因为换行书写而导致div之间有间隙的问题,font-size:0就可以有用武之地了,只需要修改一下CSS类div0就可以了:
.div0{ margin-top: 40px; width: 700px; height:200px; background-color: orange; font-size: 0; }
和之前有什么区别?就加了一个“font-size: 0;”,font-size:0用法就是这样,当然了你在父级上加入了“font-size: 0;”,要注意再设置一下其后代的字体,不然内容就没法显示了。
最后的效果如图: