1587825300 发表于 2018-4-14 01:30:47

font-size为0,高度反而增高的原因

本帖最后由 1587825300 于 2018-4-14 01:32 编辑

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

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;
    }

我测试下Firefox和chrome浏览器,基本上都是增加了6.3-6.4px,不管父元素line-height高度设置多高都是增加这么多,但是如果父元素字体设置变大了,增加的高度也会跟着变大。

解决办法只有让span的高度为0,line-height:0;

但是是什么原因呢???

1587825300 发表于 2018-4-15 00:09:05

今天吃饭的时候突然想起用inline-block验证,发现已经有结论了,具体到我博客上去看吧,搜font-size即可 https://www.mulingyuer.com   
页: [1]
查看完整版本: font-size为0,高度反而增高的原因