line-height:1.5; //行高不设置单位时，为当前元素字体大小*1.5

不是文字撑开了div的高度，而是line-height

.test1{font-size:20px; line-height:0; border:1px solid #cccccc; background:#eeeeee;}
.test2{font-size:0; line-height:20px; border:1px solid #cccccc; background:#eeeeee;}<div class="test1">测试</div>
<div class="test2">测试</div>

line-height行高怎么就产生了高度呢
在inline box模型中，有个line boxes，这玩意是看不见的，这个玩意的工作就是包裹每行文字。一行文字一个line boxes。但要是竖着写，一行一个，一行罩着一个line boxes。line boxes什么特性也没有，就高度。所以一个没有设置height属性的div的高度就是由一个一个line boxes的高度堆积而成的。

行高的垂直居中性
无论line boxes所占据的高度是多少（无论比文字大还是比文字小），其占据的空间都是与文字内容公用水平中垂线的。看test1的结果，此时line boxes的高度为0，但是它是以文字的水平中垂线对称分布的。这一重要的特性可以用来实现文字或图片的垂直居中对齐。

多行文字居中
利用line boxes的特性,将多行文字diplay:inline-block放在一行显示,在设置行高即可

当设置了font-size时,设置行高会有误差,解决方案:

.jf-badge-news::after {content: " ";display: inline-block;width: 0;height: 100%;vertical-align: middle;/* margin-top: 1px; */
}