# Не удаётся добавить пробел рядом с эмодзи внутри тегов \<kbd\>

**URL:** https://meta.discourse.org/t/cant-insert-space-next-to-an-emoji-inside-kbd-tags/248059
**Category:** UX
**Created:** [06.Декабрь.2022 22:47:01 UTC](https://meta.discourse.org/t/cant-insert-space-next-to-an-emoji-inside-kbd-tags/248059 "2022-12-06T22:47:01Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [06.Декабрь.2022 22:47:01 UTC](https://meta.discourse.org/t/cant-insert-space-next-to-an-emoji-inside-kbd-tags/248059/1 "2022-12-06T22:47:01Z")

</div>

`<kbd>:blue_square: любой текст</kbd>`

Отобразится так же, как:

`<kbd>:blue_square:любой текст</kbd>`

🟦 любой текст

Между эмодзи и текстом нет видимого пробела, хотя в HTML-коде пробел присутствует.

Является ли это ограничением тега `<kbd>`? Есть ли элегантный способ исправить это, или нам следует полагаться на «костыли», такие как `&nbsp;` или `ㅤ` и т. д.?

`<kbd>:blue_square:&nbsp;любой текст</kbd>`

🟦&nbsp;любой текст

`<kbd>:blue_square:ㅤлюбой текст</kbd>`

🟦ㅤлюбой текст

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [07.Декабрь.2022 02:44:47 UTC](https://meta.discourse.org/t/cant-insert-space-next-to-an-emoji-inside-kbd-tags/248059/2 "2022-12-07T02:44:47Z")

</div>

Скорее всего, это `display: inline-flex;`, применяемый к тегам KBD, что заставляет элементы располагаться ближе друг к другу.

Возможно, здесь есть обходной путь через CSS, но я не уверен.

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [07.Декабрь.2022 12:53:48 UTC](https://meta.discourse.org/t/cant-insert-space-next-to-an-emoji-inside-kbd-tags/248059/3 "2022-12-07T12:53:48Z")

</div>

Одно из решений — добавить некоторые значения для свойства **white-space** , например **pre-wrap** , но это вызовет проблемы, если внутри `<kbd>` будет более одного переноса строки.

![image](https://global.discourse-cdn.com/meta/original/4X/2/d/a/2da43f06dbf0900167db166ffbb8c58d2b1a74d0.png)

Станет выглядеть так:

![image](https://global.discourse-cdn.com/meta/original/4X/d/d/5/dd57ab3d663dab3cab10adb32e5971f0d3243b6e.png)

* * *

Альтернативный вариант — автоматически добавлять левые и/или правые отступы для эмодзи, если он не является первым или последним элементом.

В текущем состоянии:

![image](https://global.discourse-cdn.com/meta/original/4X/b/5/d/b5d01fa1036ea420ff6dd4a1025372979d120a4b.png)

![image](https://global.discourse-cdn.com/meta/original/4X/0/5/a/05a586575a882f3009874bc2c1258e3bd6c4dda0.png)

С добавлением этого CSS:

```scss
kbd {
    // текущие правила
    img {
        margin: 0 .5em;
        &:first-child {
            margin-left: 0;
        }
        &:last-child {
            margin-right: 0;
        }
    }
}

```

![image](https://global.discourse-cdn.com/meta/original/4X/7/5/a/75a1273cf98958adb96696d2310906e2fef55919.png)

![image](https://global.discourse-cdn.com/meta/original/4X/7/a/1/7a1793498188ea9ea07f6c522b122c67636d1d45.png)

Будут ли такие принудительные отступы приемлемы? Это выглядит лучше и повышает читаемость, но пользователю будет невозможно **избежать** отступа между эмодзи и некоторым текстом (что касается меня, я был бы рад, так как считаю принудительный отступ преимуществом).

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [08.Декабрь.2022 05:40:56 UTC](https://meta.discourse.org/t/cant-insert-space-next-to-an-emoji-inside-kbd-tags/248059/4 "2022-12-08T05:40:56Z")

</div>

> [@Canapin](#):
>
> Будут ли эти принудительные отступы приемлемыми?

Не уверен насчёт этого, посмотрим, что подумают [@Designers](https://meta.discourse.org/groups/designers). В идеале мы могли бы просто научить `inline-flex` быть более… гибким.

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [08.Декабрь.2022 18:08:17 UTC](https://meta.discourse.org/t/cant-insert-space-next-to-an-emoji-inside-kbd-tags/248059/6 "2022-12-08T18:08:17Z")

</div>

Думаю, для этого можно использовать свойство `gap`? Проблема в том, что переход `kbd` на flexbox убрал естественные отступы между элементами внутри:

```css
kbd {
  gap: 0.5em;
}

```

даёт:

![Screenshot 2022-12-08 at 1.06.10 PM](https://global.discourse-cdn.com/meta/original/4X/5/c/7/5c7645afaffbbbe32825d44bfb62c337190fcfec.png)

Это добавит отступы между любыми HTML-элементами внутри тега KBD и не потребует исключений для первого или последнего дочернего элемента.

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [12.Декабрь.2022 18:54:08 UTC](https://meta.discourse.org/t/cant-insert-space-next-to-an-emoji-inside-kbd-tags/248059/8 "2022-12-12T18:54:08Z")

</div>

Я только что объединил это:

> <https://github.com/discourse/discourse/pull/19427>
>
> This ensures that there's always horizontal space between elements (like text an…d emoji) within a KBD tag. Flexbox ignores the whitespace that would be present otherwise. 
> 
> Before:
> !\[Screenshot 2022-12-12 at 1 34 04 PM\](https://user-images.githubusercontent.com/1681963/207126355-1ac9d0e5-c50e-465c-828f-b7ea85469c1b.png)
> 
> After:
> !\[Screenshot 2022-12-12 at 1 34 13 PM\](https://user-images.githubusercontent.com/1681963/207126357-34d3c7d8-5870-4a35-bef7-fe626238a3ac.png)
> 
> 
> 
> 
> Discussion here: https://meta.discourse.org/t/cant-insert-space-next-to-an-emoji-inside-kbd-tags/248059

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [12.Декабрь.2022 19:20:05 UTC](https://meta.discourse.org/t/cant-insert-space-next-to-an-emoji-inside-kbd-tags/248059/9 "2022-12-12T19:20:05Z")

</div>

Отлично, спасибо! 👍

Кстати, я не знал про свойство gap, всегда полезно чему-то научиться.