Flexbox：文本项“font-size：0”并占用空间

Question

div { display: flex
    ; font-size: 0
    ; justify-content: space-between
    }

div > a { font-size: 10pt }

<div>
  Banana
  <a>Meat grinder</a>
  <a>Phone</a>
</div>

Live

为什么Flexbox文本项在font-size设置为0时会占用空间？有没有办法绕过它，例如文本项的选择器？假设我无法访问HTML。

Answer 1

规范说：

  

4. Flex Items

     

简而言之，flex items的flex container是   代表其流入内容的方框。

     

flex container的每位流动儿童成为flex item，   以及直接包含在一个文本中的每个连续文本   flex container包含在匿名flex item中。   但是，仅包含white space的匿名Flex项   （即可能受white-space影响的字符   不呈现，就像它是display:none。

因此，您观察到的这种行为是由于您的文本被包装在匿名弹性项目中引起的，即使您的文本由于font-size: 0而未显示。