删除 display:flex 会在链接周围添加空格。为什么？

我创建了一个 html 错误页面。它有 2 行显示错误。第二行有主页链接。为了使两条线保持在中心，我创建了一个顶层css-grid并使网格的每一行成为flex。我注意到如果我使用display:flex对于第二行，周围没有任何空间here链接，但如果我删除display:flex，空格被添加，即 html 更改为Clickhereto to Click here to。小提琴位于https://jsfiddle.net/manuchadha/qL6pz0nd/

为什么删除后会添加一个空格flex财产？

Code

html

<div id="invalid-page-grid-container">
  <h1 id="invalid-page-h1">Oops!</h1>
  <h6 id="invalid-page-para">The Page you are looking for does not exist! Click <a [routerLink]="homepageRouterLink"> here </a> to go back to home page of the application !</h6>
</div>

css

#invalid-page-grid-container{
  display:grid;
  justify-content:center;
}

#invalid-page-h1{
  display:flex;
  justify-content:center;
  grid-row: 1/2;
}

#invalid-page-para{
  /*display:flex;*//*UNCOMMENT THIS AND YOU'LL SEE SPACE GETTING ADDED AROUND <a> of the html*/
  justify-content:center;
  grid-row: 2/3;
}

这是因为 flexbox 删除了之间的默认空白inline or inline-block元素。

这是一个没有 Flexbox 的代码，其中有空格：

.box {
  font-size:30px;
}

<div class="box">
  <a>click</a>
  <a>here</a>
</div>

我们可以通过从标记中删除它或使用任何一般的方法:

.box {
  font-size:30px;
}

<div class="box">
  <a>click</a><a>here</a>
</div>

或者将 div 设为 Flexbox 容器：

.box {
  display:flex;
  font-size:30px;
}

<div class="box">
  <a>click</a>
  <a>here</a>
</div>

如果我们检查规格:

Flex 容器的每个流入子项都会成为一个 Flex 项目，并且每个 子文本运行的连续序列被包装在匿名中 块容器弹性项目。然而，如果孩子的整个序列 文本串仅包含空格（即可以是的字符 受空白属性的影响）它没有被渲染（只是 就像它的文本节点显示：无）。

因此，在我们的代码中，我们有两个子项和一系列未渲染的空白。