When do you use px and when do you use em?

Hey Cassandra!

Great question. Typically, we want to refrain from using em for things like margins and paddings, as we generally use them when dealing with text instead.

Em is a relative unit whereas a px is an absolute unit. So, what does this mean? Basically, it means that the em value could be different for other people than it is for you, whereas pixels should stay the same.

Sidenote: This is simplified and in actual fact, px are also relative to the users display, however we still say they are an absolute unit. This is because to the human eye the difference here would be negligible, and just depends on the screen density.

So, we're all about consistent user experiences, why don't we always just use px? Well, as you probably know, displays come in all sorts of sizes, so 500px may look fine on you screen, but not on a mobile. That's when we usually use % units.

But, I haven't mentioned em yet, when do we use this? Well, it all comes down to text. An em is actually just the size of the letter m on the display (We use it because it's the widest character). For most people, the em unit is going to appear the same size, as 1em is the current size of the font, with 2em being twice as big. The great thing is, this allows us to make text appear relative to the font.

Now, how come it's relative if everyone has the same font size? Well, not everyone does actually. Putting aside slight differences we may have on operating systems and devices, the main reason we use em for text is accessibility. Perhaps your user has an accessibility option on that makes their font slightly bigger than everyone else's. Now, if you have a headline on your site using px, and this user has an accessibility option that increases their text size, you may find that your px headline would not adjust to this, however all the other text would. Therefore, your headlines no longer look like headlines, and other text on the page may actually be bigger than the headline! Not good. That's why it's best to always use em for fonts - to avoid this issue.

Now, hopefully this explains why we wouldn't use em for margins and paddings. It would look slightly weird if we adjusted how big the margin on your image is based on the user's font size - unless you had a specific reason for doing this.

If you have any more questions about this or need something explained further, do let me know in the comments :)