<kbd>:blue_square: any text</kbd>
다음과 동일하게 렌더링됩니다:
<kbd>:blue_square:any text</kbd>
any text
HTML 코드에는 공백이 존재하지만, 이모지와 텍스트 사이에 보이는 공백은 없습니다.
이것이 <kbd> 태그의 제한 사항인가요? 나 ㅤ 같은 해킹적인 방법을 의존해야 하는지, 아니면 우아한 해결책이 있는지 궁금합니다.
<kbd>:blue_square: any text</kbd>
any text
<kbd>:blue_square:ㅤany text</kbd>
ㅤany text
아마도 KBD 태그에 적용된 display: inline-flex; 때문에 요소들이 더 가깝게 붙어 있는 것 같습니다.
CSS로 우회할 수 있는 방법이 있을 수도 있지만, 확실하지 않습니다.
white-space 속성에 pre-wrap와 같은 값을 추가하는 것이 하나의 해결책이 될 수 있지만, <kbd> 안에 줄바꿈이 하나 더 있는 경우 문제를 일으킬 수 있습니다.
다음과 같이 변합니다:
대안으로, 이모지가 첫 번째 또는 마지막 요소가 아닌 경우 자동으로 왼쪽 및/또는 오른쪽 여백을 추가하는 방법이 있습니다.
현재 상태:
다음 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 요소 사이에 간격을 추가하며, 첫 번째/마지막 자식 요소에 대한 예외 처리가 필요하지 않습니다.
방금 이 PR을 병합했습니다:
좋아요, 감사합니다! 
참고로 gap 속성은 몰랐는데, 새로운 것을 배우는 건 항상 좋습니다.