Picking between px and em/rem in CSS has always confused me
Picking between px and em/rem in CSS has always confused me. This post by @JoshWComeau has finally made this decision clear!
Summary: If the value should increase with the default font size, use rem. Otherwise, use px.
https://www.joshwcomeau.com/css/surprising-truth-about-pixels-and-accessibility/
So, use em/rem for font-size so it honors browser font-size settings. But use pixel for values like padding/margin/border.
This way, as font size increases, whitespace generally doesn’t increase (since more whitespace hinders readability by leaving too little space for text).