The discussion revolves around the issue of inserting a space next to an emoji inside <kbd> tags. Canapin noticed that even though a space is present in the HTML code, it doesn’t render visibly.
Sam suggested that the issue might be due to the display: inline-flex; property applied to KBD tags. Canapin proposed a solution using the white-space property, but it had some drawbacks. Another alternative was to add left and/or right margins to the emoji using CSS.
Sam expressed uncertainty about the forced margins, and awesomerobot suggested using the gap property to add space between elements within the KBD tag. This solution was implemented, and awesomerobot merged the changes into the Discourse repository. Canapin thanked awesomerobot and expressed appreciation for learning about the gap property.
<kbd>:blue_square: any text</kbd>
Will render the same as:
<kbd>:blue_square:any text</kbd>
any text
There is no visible space between the emoji and the text, though the space is present in the HTML code.
Is that a limitation of the <kbd> tag? Is there an elegant way to fix it or should we rely on hacky stuff like or ㅤ etc?
<kbd>:blue_square: any text</kbd>
any text
<kbd>:blue_square:ㅤany text</kbd>
ㅤany text
It’s probably the display: inline-flex; that is applied to KBD tags, forcing stuff closer together.
There may be a CSS workaround here, not sure.
One solution is to add some values for the white-space property, like pre-wrap, but it will cause issues if we have one more multiple line breaks inside <kbd>.
Would become:
An alternative would be to automatically add left and/or right margins on the emoji if it’s not the first or last element.
In the current state:
With this added CSS:
kbd {
// current rules
img {
margin: 0 .5em;
&:first-child {
margin-left: 0;
}
&:last-child {
margin-right: 0;
}
}
}
Would these forced margins be acceptable? It’s prettier and increases readability, but it will be impossible for the user to not have a margin between the emoji and some text (as for me, I’d be happy since I see the forced margin as a benefit).
Not sure about this, let’s see what @Designers thing. Ideally we can just teach inline-flex to be more … flexible
I think we can use the gap property for this? the problem is that changing kbd to use flexbox removed any natural space between elements within:
kbd {
gap: 0.5em;
}
produces:
This would add space between any HTML elements within the KBD tag, and wouldn’t require any exceptions for first/last-child.
I’ve just merged this in:
Awesome, thanks! 
Didn’t know the gap property by the way, always good to learn something.