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

问题描述

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

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

代码

html

<h1 id="invalid-page-h1">糟糕！</h1><h6 id="invalid-page-para">您要找的页面不存在！点击<a [routerLink]="homepageRouterLink">这里</a>返回应用程序的主页！</h6>

css

#invalid-page-grid-container{显示:网格；对齐内容:中心；}#invalid-page-h1{显示:弹性；对齐内容:中心；网格行:1/2；}#invalid-page-para{/*display:flex;*//取消注释这个，你会看到空间越来越多的 html*/对齐内容:中心；网格行:2/3；}

解决方案

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

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

.box {字体大小:30px；}

<a>点击</a><a>这里</a>

我们可以通过从标记中删除它或使用任何常用方式:

.box {字体大小:30px；}

<a>点击</a><a>这里</a>

或者通过使 div 成为一个 flexbox 容器:

.box {显示:弹性；字体大小:30px；}

<a>点击</a><a>这里</a>

如果我们检查规范:><块引用>

flex 容器的每个 in-flow 子元素都变成了一个 flex item，并且每个子文本运行的连续序列被包裹在一个匿名的块容器弹性项目.但是，如果整个子序列文本运行仅包含空格(即可以是受 white-space 属性的影响)它不会被渲染(只是就好像它的文本节点是 display:none 一样).

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

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/

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

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

解决方案

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

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>

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:

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屋！