开发指南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>)之间行间距,以及字体图标之间的行间距