子元素行高通过继承父元素行高获得，并且给子元素设置display为内联块，父元素的高度比子元素要高几个像素

Question

子元素行高通过继承父元素行高获得，并且给子元素设置display为内联块，由于要解决内联块行内布局的3像素bug，所以给父元素设置了font-size：0；但是最后的实际效果确是父元素比子元素高几个个像素。。。。求大神告知原因；代码如下，css全部写在行内方便看。

<div style="line-height: 60px;background: red;font-size: 0;">
    <span style="display: inline-block;background: black;font-size: 22px;color: white;">子元素</span>
    <span style="display: inline-block;background: black;font-size: 22px;color: white;">子元素</span>
</div>

实际效果也贴出来：

望大神告诉我原因，我遇到这个问题好多次，百度了好多天没有任何头绪。。。。
经过我测试的解决办法：
1.去掉父元素的font-size：0； 但是会出现内联块的bug，由于我需要行内块布局，所以不考虑改变display。
2.将父元素的行高去掉分别写在子元素内即可。

到底是什么原因导致父元素高度比子元素高啊。。。。头痛。。。。

Answer 1

https://zhuanlan.zhihu.com/p/...

Answer 2

要解决这个问题，你把外层div的line-height去掉，span的line-height加上就好了。

  <div style="background: red; font-size: 0;">
    <span style="display: inline-block; line-height: 60px; background: black; font-size: 22px; color: white;">子元素</span>
    <span style="display: inline-block; line-height: 60px; background: black; font-size: 22px; color: white;">子元素</span>
  </div>

Answer 3

子元素span加上 vertical-align: top;
所有的inline，inline-block都会受到line-height、font-size以及vertical-align的共同影响。其中若inline-block没设置高度和line-height，而是父标签设置了line-height，则必须设置vertical-align，设置下vertical-align：top或者 bottom 或者其他任意一种对齐方式都可以解决。