Simple Explanation Of rem & em CSS Units 

Had a little time this morning and I have had a lot of questions from people asking about the rem unit in my last video. Hopefully this clears things up. Have a great Sunday everyone!

What more can I say; that each time I need clarification on a subject, I have but one place to go; Traversy Media. Five star to you, Mr. Brad.

Was following a paid tutorial... they made it seem soo complicated. Thank you so much for all your work

Some ideas for next videos: * Stripe API project * Building extension/theme for VS Code/Chrome * HTML newsletter design, MailChimp crash course, MJML crash course. * Jekyll crash course

Hey, when em is used on padding and margin, it's gonna be relative to that element's font-size. Not to its parent. You didn't mention that.

This is the best explanation I could find about this topic, really clear to understand. Thank you!

### `What is the EM and REM css scale unit` Those are browser scale units. The browser set the px for the user. If you are defalut user your pixel size is 16px. Otherwise if you change the pixel setting in browser for example set the "LARGE" now your default px is 24px. `So, REM base on browser pixel size.` if you are a normal user. 1rem = 16px 2rem = 32px 0.5rem = 8px otherwise if you change the font size settting to large 1rem = 24px 2rem = 48px 0.5rem = 12px So what is the EM also? The EM not base on browser font size. `EM base on parent elements size` for example body{ font-size: 20px; } now 1em = 20px even the browser defalut font size settings equals 16px. at the same time 1rem = 16px.

Simple explanation and demonstrations. I will never forget how to use rem, em, vh, and vw! Thanks a mill!!!

So technically, rem can be used to size up, make sites smaller, responsive gapping, font-sizing across multiple screen sizes with a single update to the html tag?!

Hey Brad, do you think you can make a video on how to deploy a simple website?? Explaining the things we need to know and understand when putting our site online ?Would be much appreciated

Thank you for this simplified explanation I finally got an understanding of this.

Perfectly explained 👌Thank you.

Beautifully explain sir love from Pakistan

I don't have words to explain how much this is valuable. Initially when video startup, due to lower voice I heard, I thought this will be boring one. Basically no energy. But it was just a matter of a second. This is awesome and very clear explanation with a directly to subject video. So as a summary, I guess this is a only video you need to check to understand the difference between those. So really appreciated.

I'm here because I enrolled for udemy course on bootstrap 4. Thanks Brad for excellent content!

The next video suggestion for me is REM - losing my religion. lol. Thanks for explaining this for us by the way. Great vid.

What I couldn’t understand after listening 1 hour class in my college , u Made me understand in 15 min . Thank you for this free content

Threre will be no need to watch an other video for rem em Thanks sir

I get so confused on this stuff. Ty

rem&em? Isn't that a rapper or some chocolate covered peanuts or something?

Hi Brad, when is going to coming cpanel series? Eagerly waiting?

Finally got the hang of this , thank you brad

Now I'm a pro. Watch me make a solid blue landing page 😂 jk. You're awesome dude! I'm learning a lot from you :)

Well appreciated Brad, you are so great trainer and person...

Thanks Brad u r awesome .Can you make project video on newsletter website with back end.

Thanks Brad. You really cleared it up with rem and em. I am looking forward to advanced css series if you're planning to make one.

Thanks Brad this was a great video, and it definitely cleared up some of my questions about the difference between rem/em and pixels. Nice video length too, I thought it wasn't too short or didn't drag on.

Hi Brad, I want to thank you for all your great work, it's very inspiring and it's making me wanna do the same but in my language, if I get to be half as good as you doing this I'll be more than happy. Thanks again and have a nice day!!

Thank you Brad for sharing. Your tutorials are very helpfull and easy to understand.

Thanks Brad ! All of ur tutorial are awesome. At your convenience, would you make a tabris.js tutorial as it can build hybrid app in javascript without using any framework such as react, vue and angular? Look forward to it!

When using ems, border and padding are relative to the font-size and not to the parent element, only the font-size is linked to the parent element. Border and padding are calculated based on font-size. So if parent is 12px, and child's font-size is 2em(=24px), 1em padding will be 24px, not 12! Correct me if I'm wrong though...

WordPress is making web developement really easy.I am just a beginner and don't know the difference between the website developed by WordPress & a website developed by HTML,CSS .can u please explain the difference.is learning all these complex coding worth it?

Thanks for yet another great, well-explained video!

thanks brad , again a great video 😊😊 god bless

Great vid brad! One issue with vh though on full height elements. On mobile view theres a bar on the bottom of the default browser(samsung). When u start scrolling down it disappears, when u scroll up it appears again - which makes the element constantly change size and it pulls all other elements up/down which is really a bad user experience. Anyone know the solution?

Thank you for explaining this. I am definitly switching to rem and vh units instead of pixels. I think this is no brainer if we want to build sites that are responsive and also accessible to end user.

Wednesday 22nd April 2020 Learning Class: Simple Explanation Of rem & em CSS Units Thank you very much for the explanation about rem and em Mr Brad Traversy.

This video is better than my bootcamp tutorial on how to use rem and em units. Best and simple explanation I've come across. Thanks👍👍👍👍

This is the Only Video in RU-vid I Got fully Clarified about CSS Units!! Thank You So Much!! But You Missed out Percentage (%)

Thanks, Brad, for this awesome tutorial. Relative units always confused and I didn't find any good tutorial which can explain this better except you. You cleared all my doubts and now I am going to change font sizes for all my websites.

Very informative. Thank you so much for this :')

Rem and Em I got it now. But VW and %, I still looking forward to understand the difference. Can someone help me please

Great explanation as usual, but pixels are still fine in responsive design (check out the source code for this youtube page for example, they don't use rems) where rem is an old no needed thing mindtheshift.wordpress.com/2015/04/02/r-i-p-rem-viva-css-reference-pixel/

very simple anf straight forward.. i have watched so many videos but this stands out.. kudos!

wow, after 5 different videos, this was the one i was looking for. Thank you for this clear explanation i was looking for.

thankyou for simple explanation. But i have a doubt that, what is the difference between vh,vw and % .As both do same thing

Suggestions for next courses plz -RWD - PWA -AMP

Hey man jst a small complaint, Ur introl music is ear piercing, care to update or re-equalize it. By the way, a huge fan of your tutorial

Do you have a vanilla js front to back course?

Thanks a million. Very helpful. But now how to use css units with responsiveness. vh, vw,em,rem?

Yes, please HTML newsletter design(responsive emails) and integrating them into MailChimp or sending from local server using Gmail.

video was 4 years ago but really explained very well. I have watched 2 to 4 videos but didn't understand

Thank you veeery much for this video:) You explained the topic perfectly!

Thanks Brad for this clear explanation. The only thing I didn't like is the the use of the ugly blue color. Hurt my eyes so bad 😵

You are helping millions of people land and survive their job. Thanks for making our life easier.

So, you might use em on elements inside a container, and then give the container values in fixed units; so that you could change all the element values that use em's, inside that container at the same time, kind of like a variable? Without affecting the rest of the page? If that makes sense? Is there any other reason to use ems?

Finally! A comprehensive, straightforward explanation of this topic. Thanks Brad, exceptional teaching as always.

This is what I was looking for! Thanks Brad

Why not Creating a facebook group so we can help each other more efficiently and you can easily connect us, helping answer our questions, maybe receive our suggestions and so on?

Wow your video finally gave me a pretty good idea on css units. Thanks man.

In the last part of this video after setting 100vh and 100vw why screen width and height increased more than 100% even of the margin and padding were set to 0% ?

viewport dope!!! defiantly not used to rem, but I’ll start using it now.

Wow, your explanation is simple and clear. Thanks

Thank You Brad, now got it clearly about px, rem, em and when they change their behavior .

I just wanted to point out that roughly half of the people who commented on this video have put their real photos as a profile picture. It's kinda unusual

One more thing is that if you set a font-size of an element using rem units, and use em units to set things like padding on the same element, that will be relative to the font size of that same element. So if the font-size is set to something like 2rem, then 1em = 2rem units.

*We're meant to be BRAD* You fill what others lack

take a look to this, www.w3.org/TR/css3-values/#font-relative-lengths , the em is not something about the father element, the same element can override this behavior, the current element got the font size value of your father, by inherited, the em is relative to the same element

I finally understand rem and em! One question, when you went a width of 100vw, why did you have a horizontal scrollbar, and how would you get rid of that without hiding the overflow?

OMG!! You're really a saviour, thank you

REM refers to the root HTML and the band... got it!

Thank you so much. You helped me understand easily.

Hi Brad u r awesome and I am sorry for forget your birthday because I watching you're videos and I didn't notice time so I sorry for that . Happy 36th birthday Brad .

Is there ever a reason to NOT always set the HTML tag's height to 100vh?

Pls make a video on how to develop chrome extension from scratch to end...

amazing explanation + short video best combination

Hey Brad, what's the difference between vw and % ? I think it's the same as rem vs em, where vw is relative to the window size, and % is relative to the parent. Can you please clarify.

keep it up bro, liked your explanation and subscribed.

good video, but you forgot to mention that with em when it comes to a length declaration it references the current element and not the parent.

they make it looks so complicated thanks for making it looks simple

your teaching is awesome, today I understood rem and em. thank you so much

Fun-fact: VW stands for Volkswagen

Thank you very much, easy explanation

Thank you so much for this video. It clarified a lot.

Do you change the html value to 10px to make calculations easier?

This is the best and simpliest explanation about css units, glad that i found this.

Dumb question, but why would you ever wanna use em units?

Thank u, Brad. Super helpful even in 2020

Nobody does it better!!!!!! Thank you so much

Pretty helpful, thank you very much...

as said by everyone this the only video were i can understand this topic

Thank you, your explanation is simple and very easy to understand

What is the difference between vh and %. Which unit I should use when?

Thank a lot sir, how can donate you for this clear information.

Thank you very very very much, that really makes sense.

I dont have any knowledge of CSS and still I got what an em and a rem are. Thank you

Thanks for explaining . But how is different from using height:100% ?

Great video. As a beginner now i know the use cases of em and rem.

Brad i always watch your videos,, that is really amazing for the next videos,, i really hope you can teach us "How to understand javascript with build complex FORM VALIDATION" please,,,please,,,make it happen and HAPPY BIRTHDAY FOR YOUU...!!!! Gracias

just Thanks ! it was very helpful .