2

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;
}
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Manu Chadha
  • 15,555
  • 19
  • 91
  • 184

1 Answers1

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>

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.

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • Thanks. Is there a way I could create space around a and also keep `display:flex`. I could put margin around a but I don't think it would be a good solution as the space might not show consistently across browsers or fonts. `a{ margin-left:2px; margin-right:2px; }` – Manu Chadha Oct 01 '18 at 20:42
  • a follow up question - why `flexbox` does this? – Manu Chadha Oct 01 '18 at 20:43
  • @ManuChadha I added the part of the specification that adds this. Flexbox does this to make it easy since whitespace are always a pain and when using Flexbox we deal with block element and no more inline or inline block ... By they way why you need flexbox in this case when it's only text? – Temani Afif Oct 01 '18 at 20:44
  • I want to center the two message lines (horizontally, not vertically). I read that flexbox is a good solution for this – Manu Chadha Oct 01 '18 at 20:48
  • @ManuChadha in this case the best way is to wrap the message into a `div` and this div will be the flex item and you center it ... actually your are making the container of the text to be flex container thus your text is getting splitted into many flex items which is not what you want – Temani Afif Oct 01 '18 at 20:50
  • Do you mean that each word in `
    ` is becoming a flex item in my code?
     – Manu Chadha Oct 01 '18 at 20:56
  • @ManuChadha not each word .. if you check the link of the specification you will see a clear example .. actually you have 3 flex items, the `a` and the contiguous text before it and the contiguous text after it. Each one will be wrapperd into an anonymous block ... which explain why the space is only remove around the `a`. If each word was a flex item you won't see any space ;) – Temani Afif Oct 01 '18 at 20:58
  • got it now. So the text `exist! Click ` was being displayed as `exist! Click` (without space). I found that an alternative way (maybe not nice) could have been to use `&nbsp` - `Click &nbsp here &nbsp to` – Manu Chadha Oct 01 '18 at 21:13
  • @ManuChadha and `nbsp` is called non breakable space :) so it's a whitespace that is not deleted in any why even with flexbox ;) so you got it now – Temani Afif Oct 01 '18 at 21:15