\u003ckbd\u003e:blue_square: 任意文本\u003c/kbd\u003e
将呈现为：
\u003ckbd\u003e:blue_square:任意文本\u003c/kbd\u003e
\u003ckbd\u003e:blue_square: 任意文本\u003c/kbd\u003e
尽管 HTML 代码中存在空格，但表情符号和文本之间没有可见的空格。
这是 \u003ckbd\u003e 标签的限制吗？是否有优雅的解决方法，还是我们应该依赖 \u0026nbsp; 或 ㅤ 等 hacky 方法？
\u003ckbd\u003e:blue_square:\u0026nbsp;任意文本\u003c/kbd\u003e
\u003ckbd\u003e:blue_square:\u0026nbsp;任意文本\u003c/kbd\u003e
\u003ckbd\u003e:blue_square:ㅤ任意文本\u003c/kbd\u003e
\u003ckbd\u003e:blue_square:ㅤ任意文本\u003c/kbd\u003e
这可能是应用于 KBD 标签的 display: inline-flex;，它将内容推得更近。
这里可能有一个 CSS 解决方法，但不确定。
一种解决方案是为 white-space 属性添加一些值，例如 pre-wrap，但这会在 \u003ckbd\u003e 中出现另一个多行换行时导致问题。
将变成：
另一种方法是，如果表情符号不是第一个或最后一个元素，则自动为其添加左边距和/或右边距。
在当前状态下：
添加此 CSS 后：
kbd {
// current rules
img {
margin: 0 .5em;
&:first-child {
margin-left: 0;
}
&:last-child {
margin-right: 0;
}
}
}
强制添加的边距是否可接受？它更美观，提高了可读性，但用户将无法不在表情符号和某些文本之间添加边距（对我而言，我会很高兴，因为我认为强制边距是一种好处）。
不确定，让我们看看 @Designers 的想法。理想情况下，我们可以教 inline-flex 变得更……灵活。
我认为我们可以为此使用 gap 属性？问题在于将 kbd 改为使用 flexbox 会移除元素之间的任何自然空间：
kbd {
gap: 0.5em;
}
产生：
这将为 KBD 标签内的任何 HTML 元素添加间距，并且不需要对 first/last-child 进行任何例外处理。
我刚刚合并了这个：
太棒了，谢谢！ 
顺便说一句，我不知道 gap 属性，学到东西总是好的。