Как исправить относительность шкалы `em` в css?

Question

с em шкала длины относительно текущего размера шрифта, эта проблема возникла.

Я хочу, чтобы число элементов было одним восьмым от моей обычной ширины шрифта. По нормальному я имею в виду, когда html-документ имеет наименее необходимые части и просто текст, написанный в моем шрифте. Мой шрифт моно.

Вы можете увидеть, как это выглядит:

Когда я просто пишу border-width: 0.125em;, границы не будут иметь одинаковую ширину.

Я не хочу использовать px, потому что я хочу произвести такую ​​же ширину на очень компактных дисплеях.

Что мне делать?

Answer 1

Вы можете использовать calc(1rem/8), чтобы получить 1/8th из 1rem или использовать 0.125rem. Использование rem будет ссылаться на размер базового шрифта документа, а не на то, что em находится по всему документу.

div { 
 
    font-family: monospace; 
 
    border: 0.125rem solid black; 
 
}

<div>foo</div>