html - 字体大小为 0(零)的 div/child 的奇怪行为

Question

收件人avoid an undesired :hover gap between lines我确实用 font-size:0 设置了容器。它工作正常，但后来我发现了 2 个问题。

Here's a jsfiddle来说明设置 font-size: 1em 时容器的显示方式。 一切都很好。

但是check this other jsfiddle : 当我用 font-size: 0em 设置容器时，我得到了 2 不需要的问题:

1 - 页面顶部和容器之间有间隙。

2 - 即使有自己的字体大小，内部文本也会消失。

所以，我的问题是:为什么会发生这种情况，我该如何解决？

Answer 1

差距的原因是两个属性

    vertical-align: top;
    display: inline-block;

如果你改成下面这样

   vertical-align: middle;
   display: inline-block;

它将解决您的问题。

DEMO

字体显示问题

• Demo

• Reference