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

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 时占用 space？有没有办法解决它，例如文本项的选择器？假设我无法访问 HTML.

Answer 1

规范说：

4. Flex Items

Loosely speaking, the flex items of a flex container are boxes representing its in-flow contents.

Each in-flow child of a flex container becomes a flex item, and each contiguous run of text that is directly contained inside a flex container is wrapped in an anonymous flex item. However, an anonymous flex item that contains only white space (i.e. characters that can be affected by the white-space property) is not rendered, as if it were display:none.

因此，您观察到的这种行为是因为您的文本被包裹在一个匿名的 flex 项目中，即使您的文本因为 font-size: 0.

而没有显示也是如此。