Удаление дисплея: flex добавляет пробелы вокруг ссылки.Зачем?

Question

Я создал страницу ошибки html.Он имеет 2 строки для отображения ошибки.Во 2-й строке есть ссылка на домашнюю страницу.Чтобы держать две линии в центре, я создал верхний уровень css-grid и сделал каждый ряд сетки flex.Я заметил, что если я использую display:flex для 2-й строки, то вокруг ссылки 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 элементами.

Вот код без 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.Однако , если вся последовательность дочерних текстовых текстовых прогонов содержит только пробел (т. Е. Символы, на которые может влиять свойство пробела) , вместо этого он не отображается (точно так же, как если бы его текстовые узлы отображались: нет).

Итак, в нашем коде у нас есть два дочерних элемента и последовательность пробелов, которая не равна сотне.