Flex removing spaces between elements (text and link)

[toolman]

Hi there,

I have the following markup with some text and a link. If I add a display:flex to the parent, it seems to be removing the space between the text and the link, like this:

This is my code:

<p class="text-center d-flex align-items-center">Text <a href="#>Link</a></p>

As you can see there is a space after the “Text”, but the flex is removing this.

Is there a reason for this?

[PaulOB]

@toolman

s you can see there is a space after the “Text”,

Yes the text is an anonymous block in that flex construct and so becomes an anonymous flex item. It’s as though a div was added around the word ‘text’ and then the single white space after the text will be truncated.

Either remove the display:flex from the parent or add a non-breaking space after the word.