删除display:flex会在链接周围添加空格.为什么? [英] Removing display:flex adds spaces around a link. Why?

问题描述

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

I have created an html error page. It has 2 lines to display error. The 2nd line has link to home page. To keep the 2 lines in the center, I created a top level css-grid and made each row of the grid a flex. I notice that if I use display:flex for 2nd row then there isn't any space around the here link but if I remove display:flex, the space gets added i.e. the html changes from Clickhereto to Click here to. The fiddle is at https://jsfiddle.net/manuchadha/qL6pz0nd/

如果删除flex属性，为什么要添加空格?

Why does a space gets added if I remove flex property?

代码

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或inline-block元素之间的默认空白.

It's because flexbox remove the default white space between inline or inline-block elements.

这是一个没有flexbox的代码，其中我们有空格:

Here is a code without flexbox where we have white space:

.box {
  font-size:30px;
}

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

我们可以通过从标记中删除空白或使用任何

We can remove this white space by removing it from the markup or using any common way:

.box {
  font-size:30px;
}

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

或通过将div设置为flexbox容器:

Or by making the div a flexbox container:

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

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

如果我们查看规范:

If we check the specification:

flex容器的每个流入子代都成为一个flex项，每个 子文本运行的连续序列包装在匿名文件中 阻止容器弹性项目.但是，如果是整个孩子序列 文本行仅包含空格(即可以 受空白属性影响)它不会呈现(只是 好像它的文本节点没有显示一样.

Each in-flow child of a flex container becomes a flex item, and each contiguous sequence of child text runs is wrapped in an anonymous block container flex item. However, if the entire sequence of child text runs contains only white space (i.e. characters that can be affected by the white-space property) it is instead not rendered (just as if its text nodes were display:none).

因此，在我们的代码中，我们有两个子项和一个不递减的空白序列.

So in our code we have two child items and a sequence of white space that is not rendred.

这篇关于删除display:flex会在链接周围添加空格.为什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！