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 calculated actually changes depending on if being used for that element's font-size or if it's being used for any other property, and this can be leveraged in some pretty awesome ways!

Knowing when to use em vs rem can be a tricky business, but hopefully this video can help put you on the right track!

--

--

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

[reactmagic]

Man finally someone gives me a real reason to use “rem” and “em” and explains it in a convincing way. This is why you are the master. Thank you sir

[Faiqa-Abbas]

This is really helpful Kevin! Stay blessed!😄
So if we summarize:
use *rem* with *font-size* because it always looks at the root or HTML element for *font-size* . So, we don't need to worry about parent-child calculations as with *em* .
use *em* with *padding* as em will adjust the padding based on the font-size of that element.
use *rem* with *margin* if you want consistent space among all the adjacent elements.

[chrisclinejax]

you have a gift for making that "ah that makes sense" moment happen

[avimishra]

I am watching this after 5 years since the video got released and still its the best video on rem and em in youtube

[franksolinsky]

Hi Kevin,

I'm just finishing day 2 of the course and I wanted to take a moment to thank you for offering this free content. I have been really struggling to understand responsive design and decided to find a way to make it click. Likewise, I have always found your content helpful and concise before, making it easy to turn to you for instruction now. I have got to say, in the two short lessons so far, it's already making so much more sense. You're the best!

[SazikimiJaeger]

Seriously having nightmares with rems and ems. But no more. The nightmare is over Thanks to you. Great tutorial again, right up to the point along with simple explanation. 😀😀😀

[jakeperl]

5 yrs on and the best explanation I've seen on this topic... for the first time I finally get it...thank you!

[daniamsalem]

I'm on your Conquering Responsive Layouts course and I learned so much from this one video. At the agency where I build WordPress templates, I'm used to building websites for desktops and then using media queries to resize designs for mobile devices. But now, my whole mindset has changed. Your use of media queries to change `html` font size with minimal changes to child elements and their font size and padding is epic!

[start-media]

This is the best explanation I’ve seen so far. Watching your tips saves years of lifetime 😊

[Anonymouspock]

That is some extremely interesting colour grading at the start.

[taariqq]

Small chunks of information, followed by enough practice, makes the concept stick.
Thanks for that 'drip content' style course on responsive layouts. It is helping immensely!

[climb.and.wander]

Great video about explaining the differences between rems and ems. For those, like me, who like to know to what actual pixels the relative values turn into, the computed values in devtools and/or just inspecting an element can give some confidence about that. Another important aspect of giving relative font-sizes is to support accessibility. If a user has different browser settings for default font-size, the font-sizes in pixels won't adapt. These are just some thoughts that came up while watching the video. Some may find it useful. Cheers!

[aneidlin]

You and your videos are probably the best teacher and resources I've found to really learn and understand what's happening with CSS. What they teach you in school or in books doesn't explain the nuances that you're going to need to know when you're developing real-world applications. Thank you so much for everything you do and for being such a boon to those of us who are looking to level up our skills quickly while also developing that deeper understanding!

[Aireekuh]

Thank you Kevin, taking your responsive layouts course now and wanted to be thorough. Had an aha moment so glad I came to check this out.

[GGdevelopment]

I've gotten 3 recommended videos from from you by YouTube and they were what I was looking for. Haha

+1 sub

[AshishSingh-heqo]

1. Font-size: rem to fixed
2. Padding: em because it see the element font size
3. Margin: rem to fixed the margin gap

[merictunc]

Finally, someone has made a clean and practical explanation of what REM and EM. 🎉 thanks for sharing

[petarkolev]

Kevin, you are amazing mentor! Each video of yours gives me "aha" moment and the insane to this is I code for 4 years now and still I have so many misunderstandings and you bring brightness to me with every video <3

[JocelynAlsdorf]

6 years later and this content is still so helpful :)

[GauthamHC]

this saves us from media query to a great extent 🙏. Thanks Kevin.