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

Question

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

如果我删除flex属性，为什么会添加空间？

法典

.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;
}

Answer 1

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

这是一个没有弹性框的代码，我们有空格：

.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 设置为弹性框容器：

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

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

如果我们检查规格：

弹性容器的每个流入子项都将成为弹性项，并且每个 连续的子文本运行序列包装在匿名中 阻止容器弹性项目。但是，如果整个子文本序列仅包含空格(即可以 受空格属性的影响(它不会呈现(只是 好像它的文本节点是显示的：无(。

因此，在我们的代码中，我们有两个子项和一个未重新加载的空格序列。