鍍金池/ 問(wèn)答/HTML/ inline-block空內(nèi)容最小高度的問(wèn)題

inline-block空內(nèi)容最小高度的問(wèn)題

示例

  <div style="line-height: 0;background: red;">
    <span style="display: inline-block;
      width: 50px;
      line-height: 0;
      background: green;"></span>
  </div>

在chrome中高度是6px 在firefox中高度是4px 我已經(jīng)去掉span前面的幽靈節(jié)點(diǎn)高度了 為什么span還會(huì)有高度呢？ 是哪里產(chǎn)生的高度?

回答
編輯回答
北城荒

不知道你想要的是哪種效果，能不能貼圖出來(lái)呢

2017年12月28日 21:53
編輯回答
茍活

你可以看成 div會(huì)以一個(gè)虛擬的x字符開(kāi)始fontsize是瀏覽器的默認(rèn)fontsize，但是這個(gè)x是看不到的，然后span的默認(rèn)vertical-algin是baseline。那么span的底部會(huì)和父級(jí)的基線(xiàn)對(duì)齊 也就是和x的基線(xiàn)對(duì)齊
這時(shí)雖然div的高度為0，但是span的底部會(huì)和這個(gè)虛擬的x的基線(xiàn)對(duì)齊 導(dǎo)致把父級(jí)的div撐開(kāi)了，之所以一個(gè)是6px，一個(gè)是4px應(yīng)該是瀏覽器的默認(rèn)字體不一樣 導(dǎo)致基線(xiàn)高度不一樣；你可以把div的font-size設(shè)置為0就可以了

2017年6月5日 04:45