You can do that with margins?

in this video i'm going to be exploring how margins are underutilized and you might be going i use margins all the time constantly on almost every single selector has margins on it and yes we use them for spacing all the time but how often do you use margin auto other than containers like margin left margin right auto do you how often just containers maybe we're really we're gonna be pushing it we're gonna be seeing the different possibilities of that and also once you get into the world of flexbox and grid how the margin top and bottom auto can be a game changer in setting up your layouts and it's not just to center something vertically you can do a lot more with it than just that so that's what this video is going to be all about hi there my name is kevin and if you're new to my channel here we learn how to make the web and how to make it look good with weekly tips tricks and tutorials and as i said in this video we're going to be exploring the underutilized margin auto usually more specific than just margin auto period but it's really something that can help you come up with more complicated layouts with more simple markup so i think it's a really useful thing to learn let's go and check it out here we are in vs code and i'm going to set up my navigation pretty quickly here just because i want you to really see how it's set up if we look in the html it's really really simple i just have one list i have i have my header i have my image in navigation and then i have my uh a standard pretty standard list there and i've already turned off on my nav list the lift style and my margins and actually we don't need that line height of three on there um there we go so we get something that looks a little bit like that and the first thing i'm going to do is come on my header and do a display flex here display flex and so that sort of breaks everything but then we can come on to my nav list and on this one we also want a display of flex and it starts looking a little bit better um but this is where a lot of the time you'll see that we have to split up the navigation into multiple pieces and sometimes that's actually the right thing to do it really depends on the context of the navigation um so it you know if it is say you have your main navigation list and then you have like social media links or something but it is showing up in your header you see that on sites all the time that should be a separate list that should not be part of your main navigation um but here i just want to look at how we can do it and because it really shows the power of using margins with flexbox and even this first part is not so much based on flexbox it's something you can do without flexbox but flexbox helps because we can very easily get things next to one another but you could technically do the same thing with floats if you needed to um but here okay so we have our navigation like that and actually what i'm going to do is on my nav list let's do a couple things here let's start with my nav which was just my nav i'm going to give that a background of pink and padding uh really small just so we can see it in a second so we can see there's my nav which is this one right here and then i'm going to come on my nav list and i'm going to give that a background of light blue and uh we shouldn't need any padding on that so there we can see that my nav list is inside my nav and because my header is display flex uh you'll notice that the nav itself here is not full width it's stopping right here because um whenever something's a flex child it's going to shrink down to the smallest it can get or not the smallest but it's going to sort of match the width of its content it's a little bit like having max width on something so by doing display flex it's shrinking down because if i didn't have that display flex on the header you can see it's stretching the whole size because a nav is a block level element block level elements by default have the width of 100 on them so they're matching their parent so we have that width of 100 but that does not exist anymore so we get down to here um so if i do want to do this trick one thing i'm gonna have to do on my nav itself um is we could do there's two different ways i could either do a flex basis of a hundred percent saying that it wants to grow um so it wants to be a hundred percent now it can't be a hundred percent because i have my logo but flex basis is always the ideal width if there's not enough room it's not going to take it um this could change if you did have flex wrap on though the other option is you could do a flex grow of one and i think this is the better solution it will look exactly the same but by default flex grow is zero meaning it won't grow but flex shrink is always on i'm not going to make this a big flexbox tutorial i have a whole series on flexbox if it's something you'd like to dive more into so here my flex grow is making it grow and take up all the available space so that is really important for this to work if i didn't do this my next steps that i'm going to do would do nothing because there'd be nowhere for these items inside to move now you could 100 do these with classes on these items as well i'm going to skip that step and what i'm going to do is say that my nav list li so nav my li's inside my nav list but then i'm going to say nth of type and i do have seven items in here so if you count one two three four five six seven so if i choose the i'm gonna choose the let's start with the seventh one and i'm just gonna give it a background color so we can see it light green and i always encourage if you're learning stuff with css to always be giving things background colors and actually let's give this one that's light green let's give this one teal which should be a little bit different i'm gonna make this one the sixth one right there so we can just so we can separate the sixth and the seventh one um and what i'm going to do just for now on the seventh one is i'm going to do a margin left of auto and this is just going to make it shoot all the way to the other side because it's putting all that margin on the left side and this is why the whole you know if you have a container you give it a width margin left margin right auto margin right auto it you know now it's centered within that space this is true of anything you do not need to be using flexbox for this it's just easy to get the items next to one another which is why i use flexbox um so we can you know play around and use margins just to get this to go where we want it to go but the thing that's more interesting here in my opinion is when you do the same thing but you're using it on not the last one so if i did that here margin left of auto you want to guess what's going to happen before i hit save so here it goes it pushes all of them over so that can be really really useful another thing actually let's just come here where i have display flex let me use the gap property just because it's really fast this isn't perfectly widely supported yet but it is coming to flexbox but it just adds the space between my items um and even let's do a margin left of 1m as well just to you know space things out i don't think we need my blue background and i don't think we need the pink background either okay so we're left with something that looks like this right now so you can see that i've pushed those over and it depends just where i'm putting my margin left on right now and you can do this on any of them and it's going to push all of those to the left but where this also gets really interesting is what if we chose my first one let's copy that so one this isn't like other languages where one you know we started zero with css you start at one and here let's just make this one pink now so we can whoops not pinks i think and i'm going to turn off the margin left so we can see i've selected the first one and now if i put my margin left of auto again take a guess of what's going to happen before i actually do this where do you think it's going to go because it might surprise you a little bit all right so here we go i'm going to hit save and it's in the middle huh what that's weird right um so what's happened is my home has a margin left of auto but so does my login and my login has the left of auto and this is exactly what happens when you do a margin left and a margin right of auto on a container it's taking the available space and it's evenly distributing it same thing's happening here this has an auto so it's automatically distributing the empty space here and this has the auto so it's splitting that space up across two different elements instead of having it all on the same element that's wild right i think this is one of the coolest things i love this so much so that is just one of the ways you can use margin in an interesting way and let's just turn off all these background colors because we don't really need them anymore i guess we don't need the selector at all and you start getting something like that these could be styled up differently to look like buttons and with one navigation instead of having to you know complicate matters in your markup you could come up with something like this and while i think this is really really cool um we can push this a little bit more and this is where flexbox does come into play and this could work in grid as well if you are using grid but this would not work if you're not using flexbox and what i'm going to do is my header i'm going to turn off my display flex we might need that anyway we'll see but what i'm going to do and let's turn off that margin left there and on my header let's give this a position of fixed because i see a lot of people asking me about navigations that are fixed on the side so let's do fixed oh you know what i never even did a margin zero on my body margin zero there we go um it you know we have position fixed on this so it wouldn't really change too much but position fixed uh left zero top zero and uh not right bottom zero and there we go it's going like that not perfect but now we can go on my nav list itself which is display flex already so they're going next to one another i'm still gonna use flex on this because we will need this to have a display flex i'll turn it off after and show you what might um i'll show you that it doesn't quite work but i'm going to change the flex direction on here to column so they stack one on top of each other and it also fixes the width of our whole uh header area at the same time and this is just because the way position fixed works it's again it's a little bit like when you do a display of flex it's shrinking and it's matching the longest word that's in here which is i guess contact or maybe sign up um so we have my navigation that's now vertical like this but what if i want to space things out a little bit differently now when we did it last time one thing that was really important was that our nav was actually stretching the full width so if we put this back on background i shouldn't delete it i guess i should have commented it out the background of pink padding one pixel i would do two so we can see it a little better you can see that my nav is stopping here it's not stretching the entire size even though we do have a flex grow of one on here and the reason flex grows not working is just because well we took off on my head or we took off the flex box so i guess i should have left that on display flex but once again they're going to go next to one another so i would have to do the same thing i did before flex direction of column just so they're like that and now my flex grow is actually making sure that it grows and let's go check out this guy here this would be background light blue again we need this guy to stretch and be the full size for this the i think it's a bit easier we just do height 100 and it's going to match the height of its parent you could also make this a display flex and give this a flex grow of one that would also work but i think this is just a little easier so we're stretching the full size so that's good because now that we're stretching the full size once again let me turn off my padding oops i had that in two spots so now that we're stretching that full size we can come to here and i can say margin top of auto and look at that that shoots all the way down to the bottom and what if i did a margin bottom of auto well it's going to be centered in that space now i did that auto on like remember this is my sixth one so this is only on the login so it's centering that between here and here and it's pushing that one all the way down which could be exactly what you want but we could come in and if you wanted to do something a little bit different we could put this as a 7 and do that as the bottom so now the last one has the margin bottom this one has the margin top so it's centering these two within the available space pretty awesome uh alternatively what we could do is like we did before this one could have my margin margin top top of auto and then it would center this whole area so the first one has auto and only this one here has auto and it's putting it there and if you really wanted to play around with it we could do on the seventh a margin bottom of auto and it would center that within this available space i mean the possibilities of this are endless and this is one of those things where i think margins are completely underrated so playing around with this you can get some with a really simple markup you can get pretty far but i do want to just show you that this is required to have flexbox because if i take this off on my nav list the whole thing breaks because it's going back to a regular list where they're stacked one on top of each other and which is normal but margin top and bottom auto in the normal formatting context it doesn't do anything so here we're taking we're changing the formatting context to display flex all of a sudden margin top and bottom auto work the same way that a margin left and right auto would work in all of our regular context where it's distributing empty space and again this would also work in flex as well so i hope you learned a couple things along the way there i hope you like this as i mentioned if you're not super comfortable with flexbox and a few of the things i was talking about there were maybe a little bit confusing or you're not super familiar with i do have a series that goes over flexbox one of them looks at the container properties one of them is looking at the individual properties we can put on items and the third one is building a simple layout with flexbox the link for that one is in the description down below so thank you so much for watching a big thank you to my patrons for helping support me every single month you guys are absolutely amazing and of course until next time don't forget to keep on making your corn on the internet just a little bit more awesome

Channel: Kevin Powell

Views: 95,441

Keywords: Kevin Powell, tutorial, html, css, css margin, css margins, margin auto tricks, css margin tricks, margin tricks

Id: Azfj1efPAH0

Length: 14min 39sec (879 seconds)

Published: Wed Sep 16 2020