Margin and Padding Deep Dive: The basics

padding's and margins seem to cause a ton of confusion especially amongst beginners when should you use which one and why should you be using that one this is the start of a three-part series we're gonna explore this and get really in depth on how padding and margin really work even if you think you know how margins and padding work I encourage you to actually watch the whole thing because I'm not just glossing over all of this I mean I'm making a three part series on margins of padding of all things I'm looking at really how they work including some weird and quirky behaviors that you might not fully expect or understand so hi there my name is Kevin and here at my channel we learn how to make the web and how to make it look good while we're at it and really that's the plan for this series we're going to be starting with this video really nice and simple what are margins and padding like the real basics behind them when you should choose one over the other one and just the basic behaviors that you might expect from them in the next video we're gonna explore one of the most annoying concepts that a lot of people don't understand which is collapsing margins along the way we're also going to explore how we can change the behavior of margins and padding's through changing the box sizing property and once we really understand how everything is working and we're super comfortable with it all we're gonna make a third video where what we're doing is actually building out a nice realistic looking thing where I'm gonna be taking a deep dive into my thought process behind margins and padding's and that video isn't so much on how they're working it's how we can use them to make things look good and understanding why space is important or why empty space is important and how we can leverage that empty space to make a better looking design so enough of an introduction that was a long one I apologize for that let's jump right into it now alright so here we are in code pen so the link for this will be shared below but you don't really need it it's a really simple thing for the moment I've commented out a little bit so we can focus on one box but I'll bring in some other boxes after when we start exploring things a little more basically I have a box here with 100 height 100 and I have a little margin of 10 at the moment just creating some empty space around it so basically what margins doing is it's creating empty space around my box so it's giving me this space right here going around and it's keeping it off the edge of my screen so if I had a margin of zero you can see it actually be touching the side of it so the margin property that was actually a shorthand so that's why when I do a margin of 10 it's pushing it across by 10 and down by 10 and it's actually adding 10 to the bottom and to the right all at the same time we can control all of them separately so I can say something like margin top of 100 pixels and it just creates an empty space of 100 pixels on top of that box and actually I should be putting this on my box here so margin bottom of 100 pixels that was a margin top wasn't it top of 100 pixels so it's gonna push that one box down now what we could also do let's turn this second box on all rights just bring them all in I guess so you can see that's pushing this down now so now if I go on my box number one and I give that a margin bottom of 10 100 pixels now it's creating the empty space on the bottom and one last one margin left 50 pixels and it will push it over 50 pixels I could add margin to the right we just won't see it because there's nothing on the right of my box right now so margin is the fundamental way of creating empty space around something it pushes things away from or either it's pushing away from stuff basically it's pushing away from everything else so it's creating this empty space that nothing else can be inside of as I mentioned this is a shorthand or this is the long way of writing it the shorthand is just a margin property by itself so I could actually get this exact same thing well we also margin right so let's just add a margin right of also 50 pixels so I could write all of that margin top bottom left and right all inside of here so I could say the margin top is 100 pixels then the margin right is gonna be 50 pixels the margin bottom is 100 pixels and the margin left is 50 pixels so this is exactly what I had written before now what this is doing is it goes in the order of a clock so it's top right bottom the left so if I change this bottom one to 200 that space will get bigger or if I make this one only 10 pixels the space on top will get smaller so I can control them all separately now you don't have to write for properties in here you could write only three so in this case I have 1050 250 so these ones are different but my left and the right are the same if I took off the last one it's going to use this for both the left and the right so I have a hundred on the top 50 on the left and the right and then 200 pixels on the bottom now if I get rid of the 200 here what's going to happen is is it's gonna use this one for the top and bottom and this one for the left and the right so you can see when I it's bigger and when I take that off it gets smaller so now it's 100 100 and then 50 50 and if I take this off then it's 100 on all four sides so when it's just margin and a number all the sides are getting the same margin so margin is creating all of this empty space around an object on the outside of the content of that object padding works very exactly much the same the only difference is it's inside of my box instead of on the outside of my box so if I go padding 100 pixels on box number two it's taking up the same amount of space as this one because I have empty space empty space empty space empty space in this case the content is the same as it was before but I'm adding space inside of my box just to really highlight what's actually happening here that's a write some text inside of these so we can see where it's going so here I have one and it's just that's how you'd expect it to here we can see number two so two isn't stuck up here in the corner because I'm adding empty space inside of my box so let's just make this let's go back to zero so it looks like this one does here or all the other ones so I have my two and then I'm gonna do padding let's just do a padding top of 100 pixels to make sure you really get it so it's adding empty space inside my box so it's adding a hundred pixels of empty space then I get to my content so if I do my padding left of 100 pixels now it's adding that empty space inside and then my content box can start so there's my content inside of there so that's why if we just did padding 100 pixels these two effectively are the same size as one another this one is just with at whitespace around it and this one includes the background color now it's really important to remember that under normal circumstances like this one padding adds to the total size of my box my box has gotten bigger we can change this behavior by changing the box sizing property but we'll see that in another video but for now it's when we're playing with margins and padding's they add to the total size of things so you might have a nice calculated out layout where you have three columns and it's all looking good and you go actually I want to make my width a bit more padding on that and then now it breaks your layout and that could be because all of a sudden your elements bigger than it used to be so just always remember margin padding and border which I'm not talking about in this video add to the total size of things and I'm not talking about border because people usually understand border I find margin and padding people mix them up now the other thing that's important to remember is if they don't have a background color on them you won't notice a difference because the big thing that makes the big difference between the two is the background color this includes background color this doesn't if on my box one here we took off the background color it looks like that and if I change this to padding it looks exactly the same literally nothing changed because there's no background color so we can't see a difference now that doesn't mean that one is better or that doesn't mean you shouldn't be choosing the right one there's still a better choice to make between the padding in the margin is just when there's no background color at all and nothing that would really distinguish it it's a lot less important and it also me sometimes makes it harder to choose should I be choosing padding or should I be choosing margin and honestly luckily we're just writing stuff and then stuff happens on the screen and so if you don't remember which one to use you try one new I want padding and then oh no no that's not what I wanted I want to push it away that must have been margin hey there you go you fixed it so it's nice and simple just to be able to you know switch between one or the other especially while you're learning them because you know it's probably the best way to do it and to really get in there now one thing that's really fundamental with margins and padding also is being able to Center something horizontally on the screen so let's go and do this with box number 30 so to be able to Center something on the screen you might have already found it or used it but I want to make sure you understand what's happening is using auto margins so on my box through here I'm gonna do a margin but I'm not going to do it on all sides I'm just going to a margin left of auto and I don't know if you know what's gonna happen or not but take a guess at what's gonna happen if you're not sure and it's probably not what you expect is that what you would thought would happen it just shoots across the screen the margin left of Auto means make the margin on the left side as big as possible and make it fill up the space so that means it doesn't matter what the space is the size can change and it's automatically calculating this margin it's figuring it out on its own to know how big it should be so that margin is just automatically calculated to fill up the entire space I could do the same thing with a margin right but we wouldn't see anything because it's already lined up on that side but we can do is we can do a margin right and a margin left of auto and that's going to Center it bang in the middle because it's automatically calculating this one and this one to fill up as much space as possible and that means they're gonna be the same size all the time and it's just going to be perfectly centered on the screen now this is really a fundamental concept of how to Center something but we also there's one sort of drawback let's get rid of all of these just leave our box number for what some people think they can then do is do a margin top of zero of auto and a margin-bottom of auto and nothing happens what why not honestly because CSS there's no other explanation it's how it's written in the spec it says that if the margin top or bottom are set to auto it will just be calculated as zero that's literally what the spec on this says so that's why it doesn't actually move so that's why you usually see something like a margin:0 auto to center something on the screen just reset you know making and actually now that I think about it this is how I always write it but if the spec says that margin top and bottom auto is zero you could just write it like that you don't really need the zero auto this is just more explicit and saying that the top and bottom are zero unless you play with it a bit I guess but the left and right will Center it up and down won't now if you get into flexbox and grid maybe you'll find some other information on this things work a little differently than you might expect but looking at the very basic level like this vertically centering is hard horizontally centering super easy margin left and margin right zero will Center it on the screen because it automatically calculates them to be as big as possible and that's just one of the quirky behaviors of CSS is yeah with margins I should say well of CSS to CSS is full of quirky behaviors and that's why I'm doing a series like this because weird stuff like this we're gonna see more quirky behaviors in the next one and that's it for this video thank you so much for watching if you haven't already please consider subscribing to this channel so you get regular updates like this one including the next video with where we're going to be looking at collapsing margins resets and the box sizing property and one last thing before we go I just want to give a big shout out to my patrons who make all of this possible so thank you so much for supporting me guys and if you are curious or interested but what patreon is or how you can help support this channel there is a link down in the description below where there should be one on the side one of these sides right now so yeah check that out if you're interested and don't forget until next time make your corner of the internet just a little bit more awesome

Channel: Kevin Powell

Views: 46,808

Keywords: Kevin Powell, tutorial, html, css, margins, padding, margins and padding, margins vs padding, the difference between margin and padding, how to use margin, how to use padding, margin and padding, margin and padding deep dive, margin vs padding, margin, auto margin, center css

Id: EhbZGV2dqZ4

Length: 13min 4sec (784 seconds)

Published: Tue Dec 12 2017