Добрый вечер!
Насколько я понимаю работу браузера, то на уровне рендеринга нет никаких em, rem и иных относительных величин, пересчет идет в px, в связи с чем остаток от деления после рекалькуляции em, rem и т.д. иногда может быть бесконечным. Из-за этого у вас выскакивают такие неровные пиксели.
Более общий момент: какой смысл присваивать значения шрифта для элемента равным rem, а остальным величинам в том же классе делать в em, а не в rem? Вся суть em в том, что такой элемент может быть засунут в тег small, например, и все значения будут пересчитаны относительно этого тега. REM создавался, чтобы избежать сложения значений вложенных em'ов (compounding), а вы в итоге создаете элемент, значения которого привязываются к локальному шрифту, а шрифт этого элемента привязываете к размеру рутового шрифта, WHAAT?
Есть смысл сделать, например, так:
.button {
fz: 1em; // default
p: 0.5em 0.75em;
lh: 1.25;
&--small {
font-size: 0.75em;
}
}
В данном случае кнопка у вас будет соответствовать размеру шрифта элемента-родителя, а если добавить к ней класс
.button--small, то 75% шрифта родителя и все значения пересчитаются соответствующим образом.
Но я бы так делать не рекомендовал из-за возможных проблем с вложенностью и расчетом em. Обычно кнопки редко встречаются в дизайне в строке (собственно, это единственная причина делать их em), и они, обычно, имеют строго заданные размеры, независимо от каких-то других элементов.
Единственное, где можно считать em хорошей практикой по моему мнению, - это иконки и некоторые текстовые утилиты (типа бутстраповского .small).
Простой
Простой
