CSS em and rem explained #CSS #responsive

today I'm going to take a look at m/sand REMS we're going to see what thedifference is between the two of themand in what situations you might want touse one or the other hi my name is Kevinand every new weekly tips tricks andtutorials series on web design anddevelopment recently Christopher Haydenasked if I could do a thoroughexplanation of the difference between MSin REMS and when we want to be usingthem because really it can be a littlebit confusing when you're not used to itI know when I first started everythingwas pixels so much easier I was alsousing position:absolute for everythingtoo so I definitely wasn't doing thingsthe best way but once I started learningwhat Em's I started using themeverywhere and then I was running intosome problems and then I discovered theRAM and I was a little bit confused atfirst but with some practice Ieventually figured it out but hopefullyI can speed that process up for you soyou don't have to go through all thegrowing pains I did when I was learningall about ends and REMS and all of thisstuff so once again I am doing this incode pen the link to this code pen willbe in the description below so if youwant to play around with it by all meansyou can go there for kit do whatever youwant with it in here you'll notice Ihave my we're not going to spend toomuch attention there but I have a columnhere for my MS and a column here for myREMS so we can compare the two I'm goingto start with the M unit and go throughall of that we'll see how it all worksand then I'm going to jump over to REMSand we're going to play around over inthe REMS the whole EM unit has itsbackground in the print world but in theworld of the web it relates just to fontsizes if you set a font size using MS itwill be in relation to that elementsparent so here if we look at what I haveI have done a bunch of CSS but most ofthis we don't have to quite worry aboutyet it starts right here I have a nicebig comment to say MS and I have mycolumn M here so let's go and find thatright there I have a column M and let'sjust space this out make it a bit easierfor you to see so I literally just havea column M my h1 and two paragraphs inhere I've already gone ahead and sizedthings a little bit so I've given my h1a font size of 2.5 m/s and my paragrapha font size of 1 M 1 M generallydefaults to 16 pixels because the parentdoesn't have asighs on it right now it's going up sothere's nothing on my column there'snothing on my grid so that means it'sjust going to go up to the body and fallon the body and see whatever the fontsize of the body is so if I come in hereand I give so this will be about 16pixels or it is 16 pixels that isgenerally the browser default and righthere you'll see my h1 is 2.5 so thatmeans it's 2.5 times bigger than thisparagraph size if I switch this overlet's just make that 3.5 we should seethat get bigger and I'll make that 2.5again and I mentioned this is always inrelation to the parent so if I come onmy column m which is the parent for myh1 and my paragraphs here and I say thefont size is 10 pixels everything is inrelation to that pixel size now so thisparagraph font size has become 10 andthis has become 25 if I go and make this25 pixels now this font size is 25pixels and this is two and a half times2560 maybe in that rangenow you can also have here the way allof this works as it is look compoundingso just to show you what I mean bycompounding let's set this to 2m soright away this is 2m so this is goingto be there the font size of this div is2m so it's 16 times 2 is 32 pixels andthen what happens is this is 1 so that'sgoing to become that 32 pixel and thenthis is the two-and-a-half and when Isay it's compounding this is one of theproblems that you can get as said yougrid so all of this is inside of a gridso the column m its parent is the gridif I say the font size is 2m it getseven bigger the font sizes arecompounding on top of each other so thefont size of this is 16 times 2 which is32 and then the font size of this nowbecomes 32 times 32 which is 64 and soon and so forth thisis two and a half times bigger than thatso you can see how things can get out ofcontrol if you're not careful whenyou're using MS so we don't really needthat or this on here I had just to getit looking back to normal now if we lookat REMS instead of MS they work verysimilar and according to the Mozilladeveloper Network REMS were actuallyinvented with the sole purpose of fixingthat whole compounding problem we justsaw so you can see here I have set myfont sizes exactly the same two and ahalf but I put a ram instead of an M andwhat REM stands for is root M and if Igo all the way up that will relate tothis font size I put that this one thatthat could be 16 everything will lookexactly the same so it's going to lookat the HTML elements font size and it'snot going to be looking at the body theroot M looks at the HTML or even youcould do the root and you could actuallyput some stuff on that if you want tobut the HTML is fine so if I look herewhoops we want to go back to my rims andI'm going to do just like I did beforewhere it's do a font size of even I'lljust do 10 pixels just like I did beforebut you'll notice that this doesn'tchange I saw a small change in widthactually but the font sizes don't changethat's weird the width change ever soslightly so the root m is moreconsistent it's always looking at theroot when used for font sizes M unitsare compounding it build one on top ofeach other and sometimes they can causeproblems where M units are a bit moreconsistent we can also use both of theseunits for other things than just fontsize I use them all the time for paddingand margin you can also use them forwidths and Heights and everythinganything that could take a you know aunit like that you can use it for andthat's where it gets a little bitdifferent now when you're using them formargins or padding and let's use marginis the first example so I'm going tolook at this let's go back over to ourMS so looking here on my h1 here I'mgoing to add a margin bottom marginbottomof 1m and it should get bigger there wego it does so what's happening is thething that's different with margin andpadding and all those other things thefont size is always looking at theparent the margin and any other unit islooking at this font size it's lookingat the font size of that element sothat's a bit of a difference in how thisworks and that can be confusing so mymargin bottom of 1m means my marginbottom is actually 2.5 m/s so just toshow you how that is working we can seethat space there if I change this to 1myou can see that space got smaller andif I change this up to 5m that spacebecame much much much biggerso this margin bottom is equal to thisfont size let's put that back to you 2.5and the same applies for padding andmargin top and left and right in widthsand all of that and we'll take off thatmargin bottom the same thing doesn'tapply for REMS REMS are always lookingat the route so if I set a margin bottomon here margin bottom let's just do 1magain so we can see the space so thatgets bigger if I change this to one REMit's going to get smaller because it'snow looking at the root m it's goingback to 16 pixels so the root M isalways consistent it's always looking atwhat the font size of the HTML elementis whereas m's are more variable thefont size looks at the parent and allthe other different properties that wecan apply they all look at the font sizeof that element now why is that usefulthat's super useful I use it all thetime for buttons so I have done a nicecall-to-action down here and I have abutton in here and I want to look at howwe can play around with that a littlebit so I have done a whole bunch of CSSbut it's just to make this look prettyit doesn't really matter too much solet's just jump right down to ourbuttons my dududu so I've done a buttonhere but all this is doing is making mytext look good and I want to turn thatinto a button so what I'm going to do isand let's give that a background I'vehad this transparent let's change thatbackground to blah let's try block letme just so we can actually see whatputting so what I like to do is I liketo give this padding so I'm going to dopadding say 1m on the top and 3m on theleft and right and there we have a nicebig button now the nice thing with thisis I can really easily adjust the fontsize on my button so let's find thatbutton here copy and let's add a secondbutton that this second button is goingto be a button small so we have twobuttons I'm a regular button and mybutton small so my button small is goingto be exactly the same but I want thefont size to be smaller on it so I'mgoing to do a font size of 0.5 M so it'sa really tiny button once that clicksthrough loops this needs to - there wegoso you can see it got really small andbecause the padding on this is set withm/s the padding around it hasautomatically adjusted to that font sizeif I had set these in REMS the paddingisn't changing the font size in themiddle is changing but when the fontsize changes it doesn't adapt normallyor automaticallywhereas with this in m/s the paddingadapts to the font size automaticallyand it keeps everything in the sameproportions my big button is bigger mysmall button is smaller and you couldobviously make it a very big button andthe same would apply so just to show youwhat I mean let's copy this one andlet's make a button large scroll backdown so now we have a button large youcan oops large and a font size of say a3m so we're going to make it a lotbigger now it's gigantic but you can seeit scaled properly it got really big buteverything looks in proportion if thesewere in REMS beside the font size is alot bigger this padding is the same asthis padding which is the same as thispadding and the left spacing is the sameall around so by doing things in Mit can often be a lot more adaptable toyour situation but where you might wantthings to be consistent is and let'smake this a bit smaller so they canstill fit next to each other you mightwant to keep the spacing on the left andright equal and actually let's make thateven smaller that's just do 1.25 becauseI'm going to run out of room so what Icould do here is I could say that mymargin I want you're on the top andbottom but I might want a margin on theleft and right of my buttons maybe Ithink they're too close together so Icould do 1m or I could do one ramp andthen the difference here is if I do 1mthe margin is relative to the size of mybutton just going to make this a littlebit bigger maybe so the this margin hereis actually going to be smaller thanthat margin there and we can do aninspect element because it's not superobvious but but call to action so we cansee the the margin is really tiny onthat one the margin is bigger on thatone and the margin is really big on thatone and if you do want consistentspacing whenever you have buttons maybethat's the situation where you'd want tobe using REMS so you're spacing isalways consistent and it's always thesame all the time and you can see when Imake that switch this space gets biggerfrom 1m it's small and then when I putit up to one REM it becomes bigger sonow all my spacing is always going to bethe same now that's way too big I'dprobably want something like 0.25 but Ican space elements out like that and Ican get consistent spacing all the timeit's not going to be relative to thefont size so I know that it's always thesame I'm doing all this with MS and REMSthis is the same ideas if I'm usingpixels right pixels are solid unitspixels never change but the reason wewant to use M's and REMS over pixels isthey make our lives much easier when itcomes to either media queries or justmaking things that are more scalable sojust like these buttons I can set fontsize to 0.5 or 1.5 and they sort ofadapt naturally I can also do somethingI put a second call to action down hereand the whole idea behind that secondcall to actionis it's my call to action small you cansee there I've added small and the wayI've said all of this up is my call toaction has no set font size on it rightnowbut if I come to here and I say my fontsize is let's say 10 pixels so it getsreally small you can see everything inthere got smaller let's go back tohaving that with no font size on it justwe can see a changeso everything up bigger and then I canhave one that's small whoopsmake that 10 and it's all gotten smallerand the reason that's happened is I havemy button so my button is has a fontsize it doesn't have a font size so it'sjust taking that font size anyway andthen my call to action however has apadding of 3m so the padding on the topand the bottom which is set to 3m isadapting to this font size so if I makethis 20 the padding on the top and thebottom adjusts automatically and if Imake this 5 it shrinks and it getssmaller automatically which is awesomethe other thing is the font sizes inhere is my h1 where'd I put my h1there's my h1 font size currently is setto 4 m so the nice thing there is it'sgoing to be 4 times bigger so here Ihaven't put up on flies this one wasjust briefed on size 1 M and again Iwouldn't ever actually use pixels Iwould be using something like 5 M if Ineeded to be smaller 1 M for somethingbigger like cetera et cetera but you cansee the whole thing is adaptingnaturally and this adaptation can goeven further that abdication gets reallyuseful when you start using mediaqueries so I've already built a mediaquery here but I haven't actually doneanything with it but on this media querylet's change the font size add a 700pixels to 25 pixels and let's shrinkthis down so you can see it's not goingtoo well let's look here you can seethat at my media query here so it'ssmallbrain sizes it's 16 pixels everythinglooks normal and then when this getsbigger everything goes out of whack butthis all got bigger and this all gotbigger and this even got bigger becauseit's adjusting to this font size andeverything is working at one point it isreaching this HTML so the MS and theREMS both reach this at one point andwith the MS again it could get out ofcontrol depending on how things arecompounding but it's just to show youthat I with one media query I can changethe font sizes of my entire site reallyeasily whereas if I had used pixels toset all my font sizes I wouldn't be ableto do this I'd be running into lots ofproblems I'd have to be building inmedia crease or absolutely everything togo through and change them in this casea one fixed solution probably wouldn'twork properly for an entire site that'sjust you know a little bit of wishfulthinking but it could push the wholesite in the right direction and give youa lot less in terms of media queries tobuild out later on and that's it guysthank you so much for watching if youlearn something hit the thumbs up if youhave a comment or question leave it downbelow and if you haven't alreadysubscribed I put out a video like thisevery single Wednesday so pleaseconsider subscribing thanks again forwatching and if you are looking forsomething else to look at try that videothat's on the screen right now YouTubedoes seem to think you would like thatone until next time take it easy