时间戳

首页 > 解决方案 > 删除 display:flex 会在链接周围添加空格。为什么？

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

问题描述

我创建了一个 html 错误页面。它有 2 行显示错误。第二行有链接到主页。为了将 2 条线保持在中心，我创建了一个顶层css-grid并将网格的每一行设为 a 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;
}

标签： cssflexbox

解决方案

inline这是因为 flexbox 删除了orinline-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 项，并且每个连续的子文本运行序列都包装在一个匿名块容器 flex 项中。但是，如果整个子 文本运行序列仅包含空格（即可能受 white-space 属性影响的字符），则它不会被渲染（就像它的文本节点是 display:none 一样）。

所以在我们的代码中，我们有两个子项和一个未渲染的空白序列。

推荐阅读