Когда ширина элемента складывается из контента и боковых паддингов (hug contents в терминах Фигмы), он может некрасиво схлопываться, если внутри оказался один символ, в особенности "1". Нелепее всего смотрятся яйцевидные беджики.
Подогонять паддинги под единицу плохо — остальные элементы получатся неадекватно большими, да и точное значение отступа будет зависеть от шрифта.
Как правильно:
1. Боковой паддинг визуально (не численно!) равен или чуть больше вертикального;
2.
min-width, равная высоте, фиксирует правильный квадрат или круг;3. Шрифт может дышать, не распирая контейнер, за счёт небольшого запаса места до реального паддинга.
.pagination-item {
height: var(--pagination-height);
min-width: var(--pagination-height);
}P.S. Если кто-то подумал, что высота таких элементов тоже должна вычисляться по контенту — нет, то плохая практика. Но объяснения потянут на целую статью.
#вёрстка