#Tech #CSS

The confusion over nesting elements set in em has been over for a couple years now, so what else is there to worry about this magnificent unit we all learned to love?

Today I faced this problem while switching from SVG images to an icon font in an upcoming layout revision for Clicksign.

First, I thought it could be something related to the font or box size, but had no success in figuring it out until I started commenting out the CSS of elements surrounding the icon. I noticed that padding and margin had something to do with it.

Tools

This little forgotten feature in Chrome’s Developer Tools helped me confirm my suspicions:

It turned out that 1.8em was generating a 7.920px padding that nudged the icon to a half pixel. Olá Brother’s amazing Sip app also helped me with its quick zoom feature.

Wrapping up

Be extra careful using em units when you have pixel-perfect demanding assets like icon fonts and other small glyphs. You can either fall back to px or fine-tune your em numbers to achieve round values.