css - Removing display:flex adds spaces around a link. Why?

Question

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

Answer 1

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>