Как прокомментировал Paulie_D, настройка контейнера таким образом, чтобы его размеры совпадали с геометрической ограничивающей рамкой его текста (наоборот текст, чтобы «прикоснуться к его оболочке») не всегда возможна в простом CSS и, как правило, даже не совсем желательна с точки зрения типографии.
Вы можете создать суперстиль "ручной работы", чтобы он соответствовал точной комбинации шрифта и текста, но если используемый шрифт не будет супер"блочным" и с унифицированными метриками, он будет работать только для этой единственной комбинации :
<body style="background: white; margin: 10vmin">
<div contenteditable style="display: inline-block;
font: 90vmin / 0.7em Times New Roman;
background-color: black; color: white;
text-indent: -.121em; word-spacing: -.317em;
">15 <!-- = space for negative word spacing --> </div>
</div>
(Обратите внимание на эти дурацкие значения text-indent и word-spacing.)
Результаты рендеринга в Firefox на компьютере с Windows:
("верно"), 
("неправильно").
Как видите, показатели (используемого) шрифта установлены для визуального баланса, а не геометрических границ.
Гипотетически использование холста JavaScript для получения геометрического ограничивающего прямоугольника текста и применения данных обратно к стилю технически возможно, но, как видно из "правильного" примера выше, даже тогда "крайний правый" пиксель верхнего плеча " 5-дюймовый глиф, выходящий за нижнюю арку, вероятно, не является правильной границей.
Вот образец для игры: https://codepen.io/alanclm/pen/oNWXerd?editors=1000
поделитесь кодом, по умолчанию такое пространство удаляется, если мы рассматриваем алгоритм пробела по умолчанию
@TemaniAfif кода нет, это происходит по умолчанию (проверено как в Chrome, так и в Opera). Я отредактировал сообщение с «примером кода»...
тело {поле:0} ?
Почему вы установили его на
float: right? Так точно будет зазор.измените 15 на 05 или FO , затем проверьте также с другими семействами шрифтов;)
Вы не знаете. Это пространство встроено в шрифт... и оно существует не просто так, чтобы буквы не соприкасались друг с другом.
@jona, так легче увидеть внутренний макет div с помощью инструментов разработчика. В противном случае край элемента окажется слишком близко к краю браузера.
@Paulie_D, есть ли способ предсказать размер этого пространства? Как всегда 1% от ширины буквы или что-то в этом роде? По какой-то причине он есть или нет, но мой дизайнер не согласен с этой причиной, и я согласен с моим дизайнером, это выглядит некрасиво, когда вы кладете большой и маленький текст рядом друг с другом - вы не можете выровнять их по левому краю. .
Нет, это полностью зависит от шрифта. Вы можете играть с
letter-spacingразмеромem, но YMMV.@Paulie_D, да, даже расстояние между буквами не меняет левый пробел. Думаю, я просто использую негибкое решение и жестко запрограммирую смещение.
Вы можете использовать
text-indentдля регулировки левого зазора иword-spacingс пробелом в (псевдо-) содержимом после последнего глифа для правого зазора, но, тем не менее, вы получите единую статическую подгонку для одной комбинации шрифт-начертание + конкретный текст.