Flexbox：文本项“字体大小：0”并占用空间

【问题标题】：Flexbox: text item `font-size: 0' and taking up spaceFlexbox：文本项“字体大小：0”并占用空间
【发布时间】：2015-07-13 07:29:29
【问题描述】：

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。

【问题讨论】：

据我所知，它不占用空间..

标签： html css font-size flexbox

【解决方案1】：

规范说：

4. Flex Items

简单地说，flex container 的 flex items 是表示其流入内容的框。

flex container 的每个流入子代都变为 flex item，以及直接包含在 flex container 包裹在匿名的 flex item 中。但是，一个仅包含 white space 的匿名弹性项目（即可能受white-space 影响的字符 property) 没有被渲染，就好像它是display:none。

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

【讨论】：