I’ve long been curious as I was working with these three units. Pixels, percentages and em’s. What concerns me as I learn coding is, do I need to avoid using px and stick to em’s and percentages mostly, or it’s not that big of a deal?
I can see how it’s useful to use the latter for responsive web design, and the effect is just amazing, as I saw on page resize many times. And I understand that using pixels are browser dependent, and are absolute size you’d see on your screen.
‘absolute size’ is relative though.
If my screen is 4K in a 27 inch monitor, and yours is 1024x768 in 27 inch, your pixel size is a lot different than mine…
The trick is, to use whichever unit best suits the particular element.
I use a mix of px, em and %, along with occasional vw and very occasional vh.
Generally I will use em for all things text related, such as font size and text containers. The reason being they will scale when the user increases their browser font size, which can make a design more responsive and robust to users changing things like fonts an font sizes. There is rem, which I rarely use, nothing wrong with that unit, it’s just my preference to use em.
I will generally use px for pixel based content, such as images, icons and their containers.
You see my logic here, pixels for pixels, em/rem for text. Not everyone does it that way, but it works for me.
Then % is of course for when you want something sized relative to its container, then vw/vh for things relative to the viewport.
No em measurements are based on the font-size of the element and if a user increases the text size via the users browser controls then you also increase anything described with em measurements including width, heights, margins and so on etc…
For example if you had text at 3em font-size but you set the container height to 48px and then a user increases the font-size via the browser controls the font-size would increase and break out of the fixed pixel height of 48px.
On the other hand if the height was set as 4em then that 4em would grow as the font-size grows and not break (i.e. they would scale uniformly together). (In reality though you would avoid any heights on elements that hold fluid content like text and avoid this issue anyway.)
Rems are like em except that are based on the default browser text size rather than a parent’s text size and don’t compound on nested elements unlike ems.
For example if you had text at 3em font-size but you set the container height to 48px and then a user increases the font-size via the browser controls the font-size would increase and break out of the fixed pixel height of 48px.
So then, in other words, the text which was at 3em would go out of the 48px container
The browser default for 1em is usually 16px. But people (with poor eyesight) can change this in their browser settings, or they can zoom their browser. They can even change the font to something they find more readable. So 1em could be made 20 or 30px by the user.
This is why I use em for text based content, it will grow with the text if text is expanded, and not break the layout.
If I sized an image with em, it would also expand when the font size is increased, which is probably not desirable, so I use px there.
You could, but as @SamA74 has explained, that is probably not the best approach.
For example:
Somebody increasing font size for clarity is unlikely to want images to expand and become blurry.
Think about your choice, and how it will affect the element at different font sizes and different screen sizes, and choose the best one for the situation. I mentioned a long time ago that planning should be one of the first steps you take in design, and that means taking time to think things through and understand how elements will behave and interact.
What you use, and what works for you, will depend on the kinds of sites you build, and the content you have.
Therefore a left margin in em would not be appropriate in this case.
Usually though you would most likely have a parent container holding all the content and a left margin on the parent in em would move all the items uniformly rather than applying margins to individual items.
