<kbd>:blue_square: любой текст</kbd>
Отобразится так же, как:
<kbd>:blue_square:любой текст</kbd>
любой текст
Между эмодзи и текстом нет видимого пробела, хотя в HTML-коде пробел присутствует.
Является ли это ограничением тега <kbd>? Есть ли элегантный способ исправить это, или нам следует полагаться на «костыли», такие как или ㅤ и т. д.?
<kbd>:blue_square: любой текст</kbd>
любой текст
<kbd>:blue_square:ㅤлюбой текст</kbd>
ㅤлюбой текст
Скорее всего, это display: inline-flex;, применяемый к тегам KBD, что заставляет элементы располагаться ближе друг к другу.
Возможно, здесь есть обходной путь через CSS, но я не уверен.
Одно из решений — добавить некоторые значения для свойства white-space, например pre-wrap, но это вызовет проблемы, если внутри <kbd> будет более одного переноса строки.
Станет выглядеть так:
Альтернативный вариант — автоматически добавлять левые и/или правые отступы для эмодзи, если он не является первым или последним элементом.
В текущем состоянии:
С добавлением этого CSS:
kbd {
// текущие правила
img {
margin: 0 .5em;
&:first-child {
margin-left: 0;
}
&:last-child {
margin-right: 0;
}
}
}
Будут ли такие принудительные отступы приемлемы? Это выглядит лучше и повышает читаемость, но пользователю будет невозможно избежать отступа между эмодзи и некоторым текстом (что касается меня, я был бы рад, так как считаю принудительный отступ преимуществом).
Не уверен насчёт этого, посмотрим, что подумают @Designers. В идеале мы могли бы просто научить inline-flex быть более… гибким.
Думаю, для этого можно использовать свойство gap? Проблема в том, что переход kbd на flexbox убрал естественные отступы между элементами внутри:
kbd {
gap: 0.5em;
}
даёт:
Это добавит отступы между любыми HTML-элементами внутри тега KBD и не потребует исключений для первого или последнего дочернего элемента.
Я только что объединил это:
Отлично, спасибо! 
Кстати, я не знал про свойство gap, всегда полезно чему-то научиться.