看到有的地方使用了font-size: 0样式，因此特意了解下其作用。
要解决的问题
font-size: 0 设置字体大小为0，但是它要实现的效果却不是字体为0看不见，而是消除子行内元素间额外多余的空白。
html在编写时往往会设置一些适当的缩进、换行（尤其是代码进行格式化），如果元素的display为 inline 或者 inline-block或者本身就是行内元素，缩进、换行、空格等字符就会产生空白间隙，导致元素间产生多余的间距，页面显示可能会变形或错乱。
设置font-size: 0时，子元素必须指定一个font-size大小，否则内容不会显示。行内元素之间会如果有空白，将会导致有一个字符的间隙。
解决行内元素之间空隙
以ul和li为例：
最合适的方法就是给li的父元素ul设置： font-size: 0;，给li设置：font-size: xxpx; 如此就可以消除各个元素之间空表间距。
下面以ul>li，分别对照其在html元素紧凑、正常格式化html标签、使用font-size: 0;时，li元素统一使用display: inline-block;，各自元素的表现。
能够很好的看到font-size: 0;消除多余间距的作用
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>font-size 0的作用</title>
<style>
*{
/* padding: 0;
margin: 0; */
box-sizing: border-box;
}
ul{
list-style: none;
}
li{
background: rgb(243, 122, 122);
text-align: center;
width: 50px;
height: 40px;
display: inline-block;
}
/* font-size为0 */
.font-size-0 {
font-size: 0;
}
.font-size-0 * {
font-size: 1rem;
}
</style>
</head>
<body>
<ul class="font-size-0">
<p>font-size: 0;消除 display: inline-block; 或 display: inline; 时换行、缩进、空格等产生的空白间距</p>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<ul>
<p>html中换行、缩进、空格等导致的元素的空白间距</p>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<ul><p>元素间没有换行、缩进、空格等字符</p><li>1</li><li>2</li><li>3</li><li>4</li></ul>
</body>各自的效果对比如下：
同样的，img、span、<a>超链接等其他行内元素，同样会产生空白间距。尤其是图片间的间隙问题，应该比较常见(并且由于是图片，不用考虑再设置文字大小)。
解决空白字符导致的行内元素间隙的其他办法
除了设置父级font-size为0之外，还可以考虑以下几种办法：
- 使用
letter-spacing、word-spacing等属性。比如设置父元素display:table;和word-spacing:-1em;，word-spacing的负值大小，可具体测试调整。 - 行内元素添加浮动，如
float:left;。 - 行内元素的
margin设置为适当的负值，也需要测试调整。比如margin-left:-8px;
最推荐的方式是， 去掉标签之间的空格、换行等空白字符，使其不产生影响。这也是压缩的最好处理方式，现代的打包工具基本都会清除这些多余的空白字符。
参考
主要转载参考自 font-size: 0的作用和用途
