버튼에서 여분 공백이 자동으로 제거되지 않도록 하기

로그인 및 가입 버튼의 텍스트를 사용자 지정했는데, 첫 글자와 나머지 글자 사이에 몇 개의 공백을 추가하려고 합니다.

예를 들어, 다음과 같은 형태입니다:
image

하지만 버튼이 화면에 표시될 때는 다음과 같이 표시됩니다:
x Login
세 개의 공백이 하나만 남도록 줄어듭니다.

<span class="d-button-label"> 요소를 검사하면 x Login으로 표시되지만, 해당 텍스트를 더블클릭하면 원래의
image 세 개의 공백이 포함된 형태로 표시됩니다.

title remove extraneous space와 title prettify를 비활성화해 보았지만, 둘 다 효과가 없었습니다.

이것이 왜 발생하는지, 그리고 어떻게 수정할 수 있는지 아는 분이 있을까요?

수정: 이 게시물에도 동일한 현상이 발생했기 때문에, 세 개의 공백이 포함된 버전의 스크린샷을 추가하기 위해 게시물을 수정해야 했습니다.

HTML 코드에서 공백 대신 &nbsp;(non-breaking space HTML 엔티티)를 세 개 사용하면 작동하나요?

<span class="d-button-label">x&nbsp;&nbsp;&nbsp;Login</span>

image

non-breaking space를 사용하지 않은 경우:
image

네, 작동합니다! :man_facepalming:t2: 너무 간단하네요, 감사합니다!