You can do that with margins?
![*](https://i0.wp.com/allprowebdesigns.com/wp-content/uploads/2023/12/1703202584_maxresdefault.jpg?resize=840%2C430&ssl=1)
Video Title: 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
-
Sale!
Wireless WIFI Repeater Extender Amplifier Booster 300Mbps
$29.99$14.99 Add to cartWireless WIFI Repeater Extender Amplifier Booster 300Mbps
Categories: Electronics, Wi-Fi Router, Wireless Wi-Fi Extender Tags: 300Mbps, 802.11N, Amplifier, Booster, Extender, mobile wi-fi booster, Remote, WIFI, Wireless, Wireless WIFI, Wireless WIFI Repeater, Wireless WIFI Repeater Extender, Wireless WIFI Repeater Extender Amplifier, Wireless WIFI Repeater Extender Amplifier Booster, Wireless WIFI Repeater Extender Amplifier Booster 300Mbps$29.99$14.99 -
Sale!
Full RGB Light Design Gaming Headset Headphones with Mic
$24.99$14.99 Add to cartFull RGB Light Design Gaming Headset Headphones with Mic
Categories: Electronics, Gaming, Gaming Headsets Tags: Design, Full, Full RGB Light Design Gaming Headset, Full RGB Light Design Gaming Headset Headphones, Full RGB Light Design Gaming Headset Headphones with Mic, Gamer, Gaming, Gaming Headset Headphones, gaming headset wireless, Headphone, Headphones, Headset, Light, Mic, Package, RGB$24.99$14.99 -
Sale!
Wireless BlueTooth Multi-Device Keyboard Mouse Combo
$39.99$19.99 Add to cartWireless BlueTooth Multi-Device Keyboard Mouse Combo
Categories: Electronics, Gaming, Gaming Keyboards, Keyboard Mouse Combos Tags: Combo, Keyboard, keyboard mouse combos, Mouse, MultiDevice, Set, WireKeyboard Mouse Combo, Wireless, Wireless BlueTooth Keyboard Mouse Combo, Wireless BlueTooth Keyboard Mouse Combos, Wireless BlueTooth Multi-Device Keyboard Mouse Combo, Wireless BlueTooth Multi-Device Keyboard Mouse Combos$39.99$19.99 -
Sale!
High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
$199.99$139.99 Add to cartHigh Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
Categories: Gaming, Gaming Chairs Tags: Adjustable, Chair, computer chairs, Desk, Executive, Gaming, Girl, Headrest, High, High Back Leather Executive Adjustable Swivel Gaming Chair, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar, High Back Leather Executive Adjustable Swivel Gaming Chairs, Leather, Lumbar, Office, Racing, Swivel$199.99$139.99 -
Sale!
Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
$29.99$19.99 Select optionsProfessional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
SKU: N/A Categories: Electronics, Gaming, Gaming Headsets Tags: Cancelling, Gaming, Gaming Headphones with Noise Cancelling Microphone, gaming headset, Headphones, Headset, LED, Light, Mic, Microphone, Noise, Professional, Professional LED Light Wired Gaming Headphones, Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone, Wired, Wired Gaming Headphones, Wired Gaming Headphones with Noise Cancelling Microphone$29.99$19.99 -
Sale!
Gaming Desk with LED Lights USB Power Outlets and Charging Ports
$349.99$249.99 Select optionsGaming Desk with LED Lights USB Power Outlets and Charging Ports
SKU: N/A Categories: Computer Desk, Gaming, Gaming Desk Tags: and Charging Ports, Charging, Desk, Desks, Gaming, gaming desk with led lights, Gaming Desks with LED Lights, Home, LED, Lights, Monitor, Office, Outlets, Port, Power, Room, Stand, USB, USB Power Outlets, White, Workstation$349.99$249.99 -
Sale!
Wired Mixed Backlit Anti-Ghosting Gaming Keyboard
$99.99$79.99 Add to cartWired Mixed Backlit Anti-Ghosting Gaming Keyboard
Categories: Electronics, Gaming, Gaming Keyboards Tags: Antighosting, Backlit, Blue, brown, Gaming, Gaming Keyboard, gaming keyboards, gaming keyboards and mouse, Keyboard, Laptop, Switch, Wired, Wired Mixed Backlit Anti-Ghosting Gaming Keyboard, Wired Mixed Backlit Anti-Ghosting Gaming Keyboards, Wired Mixed Backlit Gaming Keyboard$99.99$79.99 -
Sale!
Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
$119.99$59.99 Add to cartWireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
Categories: Electronics, Gaming, Gaming Headsets Tags: 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, ANC, Audio, Bluetooth, Cancellation, Ear, Earphone, gaming headset, Headphones, Headset, Hi-Res Over the Ear Headphones Headset, HiRes, Noise, Wireless, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Headphones, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headsets$119.99$59.99 -
Sale!
Wired Sports Gaming Headset Earbuds with Microphone
$19.99$9.99 Select optionsWired Sports Gaming Headset Earbuds with Microphone
SKU: N/A Categories: Gaming, Gaming Headsets Tags: Accessories, Earbud, Earphone, Earphones, Gaming, gaming headset with microphone, Headphones, Headset, IOS, Microphone, Sports, Wired, Wired Sports Gaming Headset Earbuds, Wired Sports Gaming Headset Earbuds with Microphone, Wired Sports Headset Earbuds$19.99$9.99 -
Sale!
150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
$49.99$29.99 Add to cart150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
Categories: Charging Stations, Electronics Tags: 150W, 150W Charging Station, 150W Universal Multi USB Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Stations, 150W Universal Multi USB MAX Charging Station, 16 Port MAX Charging Station, 3.5A, Charger, Charging, Fast, laptop charging stations, Max, Multi, Port, Stand, Station, Universal, USB$49.99$29.99
Awesome stuff. Thanks a lot! ❤
Excellent video! Thanks
im addicted to margin i just use it for evreything
Hello kevin, you've saved me the pain of having to create a flexbox inside another. margin auto is the way to go, thanks!
we can use flex box . it work like your code
hi i really need your help can you show us how to create a message bubble like in telegram which can be used on a image background
1:14 1:21 5:43 6:40 7:40 9:20 9:30
If you think you know CSS, watch this guy.
Hi Kevin, I have watched many of your videos and they are always well done. I write websites in the raw code (not templates) and have done a good handful of sites. This particular video directly addresses serious headaches I run into with respect actually achieving the spacing I am looking for in my navigations or other list-options areas. I won't bore you with the details of what I have done to make it work (it is WAY too embarrassing). It is the combination of the margin usage you discuss WITH THE "nth-of-type()" selecting you are doing that enables a big reduction in BOTH the amount of CSS and the amount of HTML/Structure required. Thanks again.
OMG, this is pure black magic, I've been struggling with my header nav using flex, it's always overlapping..
No no, this is voodoo
Very helpful, thanks so much!
Kind of first day at work and I did shine like a hero.
A day, or two ago I watched THIS very video.
Flex -> margin-top:auto did magic in Woo's tile.
No need to div the nav again! awesome!
I use background-color: on just about anything —but— unlike Kevin I do not delete the entire statement when I think I don't need it any more. I change the value to transparent so I can use it again.
margin:auto does not work with float
Hi Kevin
when a web application loading in that time application screen display in 80% zoom not 100%
I use the css zoom properties it's working but som places of the application styles are miss match for modal pop-up windows
please help
great!
Could you do a vid on negative margins, please?
I have a ? About css plz kevin
thank Kevin, please I follows one of your pop-up video for using javascript / html, I with anchor tag the whole is not coming.
Hi, im a little confused at 6:05 is flexbox needed or not? because at the end of the video, omitting flex will cause margin auto to not do this.
now I know what margins can really do wow
This guy is a boss oooo😂
I use margins instead of width.
Thank you Kevin
Hi Kevin, really loved this video. I always get stuck wih CSS and this helped me alot to understand how this all works. 👍
Simply great. thanks
wow my friend, you really have skills. How can I make a horizontal Arrows button on the right and left side of the scroll bar?
it was a bit complicated to understand, I didn't get quite well why all those actions happen, but it was awesome to see it.
Can we insert photos in columns?
Amazing content, thank you!
when im giving margin to the exact element it is not moving ? why