CSS em and rem explained #CSS #responsive

today I'm going to take a look at m/s and REMS we're going to see what the difference is between the two of them and in what situations you might want to use one or the other hi my name is Kevin and every new weekly tips tricks and tutorials series on web design and development recently Christopher Hayden asked if I could do a thorough explanation of the difference between MS in REMS and when we want to be using them because really it can be a little bit confusing when you're not used to it I know when I first started everything was pixels so much easier I was also using position:absolute for everything too so I definitely wasn't doing things the best way but once I started learning what Em's I started using them everywhere and then I was running into some problems and then I discovered the RAM and I was a little bit confused at first but with some practice I eventually figured it out but hopefully I can speed that process up for you so you don't have to go through all the growing pains I did when I was learning all about ends and REMS and all of this stuff so once again I am doing this in code pen the link to this code pen will be in the description below so if you want to play around with it by all means you can go there for kit do whatever you want with it in here you'll notice I have my we're not going to spend too much attention there but I have a column here for my MS and a column here for my REMS so we can compare the two I'm going to start with the M unit and go through all of that we'll see how it all works and then I'm going to jump over to REMS and we're going to play around over in the REMS the whole EM unit has its background in the print world but in the world of the web it relates just to font sizes if you set a font size using MS it will be in relation to that elements parent so here if we look at what I have I have done a bunch of CSS but most of this we don't have to quite worry about yet it starts right here I have a nice big comment to say MS and I have my column M here so let's go and find that right there I have a column M and let's just space this out make it a bit easier for you to see so I literally just have a column M my h1 and two paragraphs in here I've already gone ahead and sized things a little bit so I've given my h1 a font size of 2.5 m/s and my paragraph a font size of 1 M 1 M generally defaults to 16 pixels because the parent doesn't have a sighs on it right now it's going up so there's nothing on my column there's nothing on my grid so that means it's just going to go up to the body and fall on the body and see whatever the font size of the body is so if I come in here and I give so this will be about 16 pixels or it is 16 pixels that is generally the browser default and right here you'll see my h1 is 2.5 so that means it's 2.5 times bigger than this paragraph size if I switch this over let's just make that 3.5 we should see that get bigger and I'll make that 2.5 again and I mentioned this is always in relation to the parent so if I come on my column m which is the parent for my h1 and my paragraphs here and I say the font size is 10 pixels everything is in relation to that pixel size now so this paragraph font size has become 10 and this has become 25 if I go and make this 25 pixels now this font size is 25 pixels and this is two and a half times 2560 maybe in that range now you can also have here the way all of this works as it is look compounding so just to show you what I mean by compounding let's set this to 2m so right away this is 2m so this is going to be there the font size of this div is 2m so it's 16 times 2 is 32 pixels and then what happens is this is 1 so that's going to become that 32 pixel and then this is the two-and-a-half and when I say it's compounding this is one of the problems that you can get as said you grid so all of this is inside of a grid so the column m its parent is the grid if I say the font size is 2m it gets even bigger the font sizes are compounding on top of each other so the font size of this is 16 times 2 which is 32 and then the font size of this now becomes 32 times 32 which is 64 and so on and so forth this is two and a half times bigger than that so you can see how things can get out of control if you're not careful when you're using MS so we don't really need that or this on here I had just to get it looking back to normal now if we look at REMS instead of MS they work very similar and according to the Mozilla developer Network REMS were actually invented with the sole purpose of fixing that whole compounding problem we just saw so you can see here I have set my font sizes exactly the same two and a half but I put a ram instead of an M and what REM stands for is root M and if I go all the way up that will relate to this font size I put that this one that that could be 16 everything will look exactly the same so it's going to look at the HTML elements font size and it's not going to be looking at the body the root M looks at the HTML or even you could do the root and you could actually put some stuff on that if you want to but the HTML is fine so if I look here whoops we want to go back to my rims and I'm going to do just like I did before where it's do a font size of even I'll just do 10 pixels just like I did before but you'll notice that this doesn't change I saw a small change in width actually but the font sizes don't change that's weird the width change ever so slightly so the root m is more consistent it's always looking at the root when used for font sizes M units are compounding it build one on top of each other and sometimes they can cause problems where M units are a bit more consistent we can also use both of these units for other things than just font size I use them all the time for padding and margin you can also use them for widths and Heights and everything anything that could take a you know a unit like that you can use it for and that's where it gets a little bit different now when you're using them for margins or padding and let's use margin is the first example so I'm going to look at this let's go back over to our MS so looking here on my h1 here I'm going to add a margin bottom margin bottom of 1m and it should get bigger there we go it does so what's happening is the thing that's different with margin and padding and all those other things the font size is always looking at the parent the margin and any other unit is looking at this font size it's looking at the font size of that element so that's a bit of a difference in how this works and that can be confusing so my margin bottom of 1m means my margin bottom is actually 2.5 m/s so just to show you how that is working we can see that space there if I change this to 1m you can see that space got smaller and if I change this up to 5m that space became much much much bigger so this margin bottom is equal to this font size let's put that back to you 2.5 and the same applies for padding and margin top and left and right in widths and all of that and we'll take off that margin bottom the same thing doesn't apply for REMS REMS are always looking at the route so if I set a margin bottom on here margin bottom let's just do 1m again so we can see the space so that gets bigger if I change this to one REM it's going to get smaller because it's now looking at the root m it's going back to 16 pixels so the root M is always consistent it's always looking at what the font size of the HTML element is whereas m's are more variable the font size looks at the parent and all the other different properties that we can apply they all look at the font size of that element now why is that useful that's super useful I use it all the time for buttons so I have done a nice call-to-action down here and I have a button in here and I want to look at how we can play around with that a little bit so I have done a whole bunch of CSS but it's just to make this look pretty it doesn't really matter too much so let's just jump right down to our buttons my dududu so I've done a button here but all this is doing is making my text look good and I want to turn that into a button so what I'm going to do is and let's give that a background I've had this transparent let's change that background to blah let's try block let me just so we can actually see what putting so what I like to do is I like to give this padding so I'm going to do padding say 1m on the top and 3m on the left and right and there we have a nice big button now the nice thing with this is I can really easily adjust the font size on my button so let's find that button here copy and let's add a second button that this second button is going to be a button small so we have two buttons I'm a regular button and my button small so my button small is going to be exactly the same but I want the font size to be smaller on it so I'm going to do a font size of 0.5 M so it's a really tiny button once that clicks through loops this needs to - there we go so you can see it got really small and because the padding on this is set with m/s the padding around it has automatically adjusted to that font size if I had set these in REMS the padding isn't changing the font size in the middle is changing but when the font size changes it doesn't adapt normally or automatically whereas with this in m/s the padding adapts to the font size automatically and it keeps everything in the same proportions my big button is bigger my small button is smaller and you could obviously make it a very big button and the same would apply so just to show you what I mean let's copy this one and let's make a button large scroll back down so now we have a button large you can oops large and a font size of say a 3m so we're going to make it a lot bigger now it's gigantic but you can see it scaled properly it got really big but everything looks in proportion if these were in REMS beside the font size is a lot bigger this padding is the same as this padding which is the same as this padding and the left spacing is the same all around so by doing things in M it can often be a lot more adaptable to your situation but where you might want things to be consistent is and let's make this a bit smaller so they can still fit next to each other you might want to keep the spacing on the left and right equal and actually let's make that even smaller that's just do 1.25 because I'm going to run out of room so what I could do here is I could say that my margin I want you're on the top and bottom but I might want a margin on the left and right of my buttons maybe I think they're too close together so I could do 1m or I could do one ramp and then the difference here is if I do 1m the margin is relative to the size of my button just going to make this a little bit bigger maybe so the this margin here is actually going to be smaller than that margin there and we can do an inspect element because it's not super obvious but but call to action so we can see the the margin is really tiny on that one the margin is bigger on that one and the margin is really big on that one and if you do want consistent spacing whenever you have buttons maybe that's the situation where you'd want to be using REMS so you're spacing is always consistent and it's always the same all the time and you can see when I make that switch this space gets bigger from 1m it's small and then when I put it up to one REM it becomes bigger so now all my spacing is always going to be the same now that's way too big I'd probably want something like 0.25 but I can space elements out like that and I can get consistent spacing all the time it's not going to be relative to the font size so I know that it's always the same I'm doing all this with MS and REMS this is the same ideas if I'm using pixels right pixels are solid units pixels never change but the reason we want to use M's and REMS over pixels is they make our lives much easier when it comes to either media queries or just making things that are more scalable so just like these buttons I can set font size to 0.5 or 1.5 and they sort of adapt naturally I can also do something I put a second call to action down here and the whole idea behind that second call to action is it's my call to action small you can see there I've added small and the way I've said all of this up is my call to action has no set font size on it right now but if I come to here and I say my font size is let's say 10 pixels so it gets really small you can see everything in there got smaller let's go back to having that with no font size on it just we can see a change so everything up bigger and then I can have one that's small whoops make that 10 and it's all gotten smaller and the reason that's happened is I have my button so my button is has a font size it doesn't have a font size so it's just taking that font size anyway and then my call to action however has a padding of 3m so the padding on the top and the bottom which is set to 3m is adapting to this font size so if I make this 20 the padding on the top and the bottom adjusts automatically and if I make this 5 it shrinks and it gets smaller automatically which is awesome the other thing is the font sizes in here is my h1 where'd I put my h1 there's my h1 font size currently is set to 4 m so the nice thing there is it's going to be 4 times bigger so here I haven't put up on flies this one was just briefed on size 1 M and again I wouldn't ever actually use pixels I would be using something like 5 M if I needed to be smaller 1 M for something bigger like cetera et cetera but you can see the whole thing is adapting naturally and this adaptation can go even further that abdication gets really useful when you start using media queries so I've already built a media query here but I haven't actually done anything with it but on this media query let's change the font size add a 700 pixels to 25 pixels and let's shrink this down so you can see it's not going too well let's look here you can see that at my media query here so it's small brain sizes it's 16 pixels everything looks normal and then when this gets bigger everything goes out of whack but this all got bigger and this all got bigger and this even got bigger because it's adjusting to this font size and everything is working at one point it is reaching this HTML so the MS and the REMS both reach this at one point and with the MS again it could get out of control depending on how things are compounding but it's just to show you that I with one media query I can change the font sizes of my entire site really easily whereas if I had used pixels to set all my font sizes I wouldn't be able to do this I'd be running into lots of problems I'd have to be building in media crease or absolutely everything to go through and change them in this case a one fixed solution probably wouldn't work properly for an entire site that's just you know a little bit of wishful thinking but it could push the whole site in the right direction and give you a lot less in terms of media queries to build out later on and that's it guys thank you so much for watching if you learn something hit the thumbs up if you have a comment or question leave it down below and if you haven't already subscribed I put out a video like this every single Wednesday so please consider subscribing thanks again for watching and if you are looking for something else to look at try that video that's on the screen right now YouTube does seem to think you would like that one until next time take it easy

Channel: Kevin Powell

Views: 169,728

Rating: 4.9713793 out of 5

Keywords: HTML, CSS, How to, Web development, tutorial, web tut, web tutorial, html5, css3, front end, front-end, front end coding, web coding, programming, front end programming, difference between em and rem, css em and rem, css em, css rem, em, rem, using em and rem, responsive typography, css em vs rem, css rem em, css rem vs em, css rem and em, css ems and rems explained, Kevin Powell web, ems and rems explained, css em and rem explained, em and rem explained

Id: _-aDOAMmDHI

Length: 16min 53sec (1013 seconds)

Published: Wed Apr 19 2017