Should I define CSS margins in pixels or ems?

[Hung The]

I’m going to build template use px combine with em. I’m trying Chris’s way from this article Why ems?

body { font-size: 100%/1.5 }
h1 { font-size: 3em; //163=48 }
h2 { font-size: 2.25em; //162.25=36 }.

But I’m wondering about should I use em or px for margin / padding. Which is the best one to go with? What are the points I should consider when deciding which to use? Thanks.

[Paulie_D]

That’s entirely a matter of choice.

My concern with ems is the calculations you have to do to keep track of the actual value.

I’d go with pixels myself but that’s a personal choice.

[Hung The]

Hi @Paulie_D

I think combine px with em woule be better especially for scaling.

[Paulie_D]

I knew there was a more recent article than the one you linked.

https://css-tricks.com/rems-ems/

[Robby]

Don’t mix EM/REM’s with pixels. If a user has a higher dpi setting all the EM’s will enlarge and all the pixels will stay the same, causing your layout to look all funky.

I’d recommend using EM/Rem’s for everything. It takes a little bit to break the “thinking in pixels” mode, but once you do it has a lot of benefits

The whole point of these measurements is so the sizing of everything is relative to the users font-size setting. That way if a user has his dpi setting to 125% (which by the way is the default for a windows 8 w/ a 1080p monitor) everything will increase in size 25% for him.

No one ever mentions this in Em/Rem articles…

So yeah go all Em/Rems if you want to empower the user and make your site elastic, or all pixels if you want to force a fixed size on them.

[Author]

Posts