CSS em vs px (rounding errors)

Question

I work on a personal website (so time is not a problem here) and I created a basic stylesheet where I will take care of all font sizes, border widths, line heights, etc. I did my best to use ems completely, but when I tested the website in other browsers (like Chromium), the content didn't match my pixel perfect grid.

So my question is here, should px be used instead? I mean, I know that ems is the "way", but nowadays most browsers implement full-scale scaling (they do not change the size of the text only), and when it comes to the borderline width and line height, px are more convenient. because I can generally avoid rounding off the rounding of the subpixels.

What are you doing this? (By the way, IE support is not one of my goals, I could not take care of this)

Answer 1

the content did not match my pixel perfect grid.

If you work with a pixel grid, use pixel values. em- A relative value that works well only if the layout can adapt to different sizes of content.

Answer 2

I would use it emonly for elements whose size depends on the font size.

Elements, such as borders (and its width), are usually independent of font size.

Answer 3

em , , .

em , , , .

This looks good until you reduce the browser window very slowly and find that sometimes the values ​​for the nested elements are rounded to a pixel other than the external parent.

To combat this, I used remat the parent level to set the font size, and found that it allows parents and children to work from the same basic relative value.