<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.