首页 » CSS » font-size为0,高度反而增高的原因

最后更新于 2018年04月15日

不知道大家平时写代码的时候有没有发现一个问题,就是有时候设置某段文字font-size:0;的时候,整行高都会突然变高,如下图。
-75

以下是代码:

html部分

<div class="div1">
    <p>x<span>x</span>sjdkdfg奥斯卡了多少卡回复</p>
</div>

css部分

.div1 {
    width: 500px;
    line-height: 20px;
    background: #999;
}
p {
    margin: 0;
    padding: 0;
}
span {
    font-size: 0;
}

原因就是因为即使span的字体大小为0,但是他的高度还是继承了父元素的line-height:20px;这就导致高度存在会占据位置,我测试下Firefox和chrome浏览器,基本上都是增加了6.3-6.4px,不管父元素高度设置多高都是增加这么多,但是如果父元素字体设置变大了,增加的高度也会跟着变大。

解决方法就是让span元素高度为0,line-height:0;

为什么会这样,这个可能和幽灵空白节点有关,具体就需要查一下官方文档了。我们接着深入看下现在span是怎么回事。
-75
我们给span设置好inline-block,添加一个宽度,加个背景色,可以看到span元素是显示往下位移的,而且整体的高度并没有再次改变,这就说明span元素发生了位移才导致的高度变高,那么为什么会位移?

这里我再给大家一张图:
-50

左边是一个x字符,用来当做字符,右边是一个inline-block的div元素,我们可以看到div有内容的时候,他们的字符会基线对齐,然后div会自动往下位移已达到对齐的效果,这也是inlie-block元素的一个特性,那么我们再看span,这个span并没有字符呀,为什么也会下降呢?

这里就要说道“幽灵空白节点”了,每一个行框盒子,就是包裹inline内容的一行,这一行你可以理解为鼠标选中文字时,背景色显现出来的区域,只要有行框盒子就会有幽灵空白节点产生,这个幽灵节点不显示也不会占据宽度,用来使文字内容对齐,而现在span里面字体消失,但幽灵节点还在,加上父元素设置了line-height:20px;导致幽灵空白节点会和文字内容对齐,也会使span的高度下移来达到对齐效果。

既然我们猜测完了,就该测试一下是不是“幽灵节点”导致,我们在span的前面加一个x字符,这样就一目了然了,如下图:
-75

一个和x差不多的高度和字符对齐,那么这足以证明我们的猜测应该是正确的,所以,以后遇到这种问题,就可以想到,原来是这个东西在作怪,于是只要将他的高度设置为0px,就不会出现这样的问题了。

  • weixiao kaixin tushetou jingkong deyi fanu liezui liuhan daku ganga bishi nanguo lihai qian yiwen numu tu yi haixiu se fadai minyan hehe henkaixin huaji biyiyan kuanghan maimeng shui xiaku penqi zhangzui pen aini ye niu laji ok chigua renshi kongbu shuai xiaoxiese touxiao huaixiao jingnu chihuai kaisang xiaoku koubi zhuangbi lianhong kanbujian shafa zhijing xiangjiao dabian yaowan redjing lazhu rizhi duocang chixigua hejiu xixi xiaopen goukun xiaobuchu shenme wusuowei guancha lajing chouyan xiaochi bie zhadanzui zhadanxiao