0
点赞
收藏
分享

微信扫一扫

开发指南116-font-size: 0的使用

平台前台的css样式里有几个地方用到了font-size: 0,这是个使用小技巧。原理说明:font-size 属性用于定义元素中文本的大小。当设置 font-size: 0 时,意味着该元素内的文本将不占据空间。当元素的 font-size 设置为零时,该元素内的 line-height 也会相应变为0,因为 line-height 是相对于 font-size 来计算的。

       居于以上原理,font-size: 0的主要作用是清除行间距。例如

   <style>
        /* 设置父容器的字体大小为 0 */
        .container {
            font-size: 0;
        }
        .container span {
            font-size: 16px;
        }
    </style>

   <div class="container">
        <span>第一行</span>
        <span>第二行</span>
        <span>第三行</span>
    </div>

也用于清除诸如列表项(如 <ul>、<ol> 中的 <li>)之间行间距,以及字体图标之间的行间距

举报

相关推荐

0 条评论