How to use em and rem
Hello, small question, I know the difference between rem and em with rem being based on font size of root element while em is based on font-size of current element.
The thing is whenever I use them, I use them interchangeably, like I don't really know where it would be better to use em or rem, just what came to my mind I put it there. The other thing is the value used together with them, I don't have a mental image of how big would my padding/size become.
For example, say I need a padding, I will just write something like : padding: 2rem, I don't really know how big 2rem is and if em would be more appropriate here.
Can someone elaborate on this please.
6 Replies
This is a very old video of mine, but I think it holds up still 🙂
https://www.youtube.com/watch?v=_-aDOAMmDHI
Kevin Powell
YouTube
CSS em and rem explained #CSS #responsive
A look at the CSS units EM and REM, how they work and when you might want to use one over the other!
First I take a look at some basic examples of both ems and rems, then move onto some more interesting things with buttons and a call to action, as well how we can take advantage of both the em and rem with media queries.
The way the em unit is ...
rem is a lot more predictable, in that 1rem is generally 16px, whereas 1em can vary very much depending on where you use it
My rule of thumb is that font size should be rem, so you don't have to worry about the compounding nature of em. But when dealing with padding/margin you want em as bigger text elements need more breathing room.
yep I see, thanks !
I like to use EM for spacing and padding and margin. So the ratio is always the same even when the clamped font size grows.
I know there’s quite a few threads archived on this topic so you may want to search the server if you need more clarification. I bet there’s a fair amount of good answers , I know I’ve included my input on this question before
noted, I have an idea where to use them now but will look for other discussion if needed, thanks !