div / child上的奇怪行为，字体大小为0（零）

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

Answer 2

这是因为该单位＆＃34; em＆＃34;是相对于其父母。如果你把它改成＆＃34; px＆＃34;这将解决问题。

Answer 3

你可以用两种方式做到这一点。好吧，我看了很多时间显示内联块，如果有空白元素，顶部有间隙你可以用vertical-align:top属性删除它。

<强> CSS

#container {
  display: inline-block;
  position: relative;
  outline: 2px dashed black;
  font-size: 0em;
  vertical-align:top;
}

这里是小提琴链接https://jsfiddle.net/yudi/28wdwLzp/1/

虽然如果您只想禁用文本，我想使用text-indent css属性。这是删除文本的正确方法

<强> CSS

#container {
  display: inline-block;
  position: relative;
  outline: 2px dashed black;
  font-size: 1em;
}
#text {
  display: inline-block;
  text-align: center;
  position: absolute;
  font-size: 2em;
  top: 15px;
  left: 0;
  right: 0;
  margin: auto;  
  text-indent:-9999px;
}

此https://jsfiddle.net/yudi/rtwacgv1/3/

的小提琴链接