Margin and Padding Deep Dive: Collapsing margins, resets, and CSS box-sizing

hi and welcome to part two of this series where we're going to be looking at collapsing margins resets and the box sizing property so stick around hi and welcome to part two of this series where we're doing a deep dive into margins and padding's in this video we're going to be looking at collapsing margins and when they don't collapse CSS resets and resetting our margins and padding's as well as the box sizing property now one thing they can cause the most confusion is collapsing margins a lot of people really don't understand what they are what's going on how they're working so we're gonna start there we're gonna work from there into when they stop collapsing eventually we'll get into the hole resets just get rid of some of how that's happening or how we can better handle it and then finally we're going to be taking a look at the box sizing property which just makes padding make a lot more sense alright so welcome back to code man we're gonna be continuing our look at margins and padding's so I have two pens here again the links for both of these are down below so if you want to explore them a little bit this first one is just to give us a really basic understanding of how collapsing margins are working then we're gonna go into text which is a more real-world example of where you'll run into this type of problem and also where we'll explore fixing it and some other stuff as well so right here what we're gonna do first you can see I have my demo box which has the margin 100 top and bottom and auto left and right just to Center it and then my box is inside that just have a color and a height all my other styling is down below but for demo purposes we don't need to get into that I just want to keep all the demo stuff up here so what the collapsing margins even mean well a collapsing margin let's go on my box one here and give this a margin bottom of 100 pixels and that will probably do what you expect it creates an empty space underneath of 100 pixels what a collapsing margin is is if two things have the same or have margins that are touching one another their margins will collapse or one of the margins will collapse pretty much it means they'll merge together so if I do a margin top of 100 pixels on my box - nothing changes the top margin of this and the bottom margin of this are merging into one another so it's not creating a 200 pixels based like a lot of people would assume would happen it would be a more intuitive behavior but it's not what happens because CSS that's just how it is so to highlight how this is working or not how it's working but what's actually going on here we're gonna look at the inspector so I'm just gonna right-click and choose inspect element if you're in chrome it would be inspect and I don't know what they have it in edge or Internet Explorer and Safari it's inspect I believe as well the only difference in Safari so you'll have to go in your properties and dev tool settings and stuff to turn it on if you're in there so this gives me a whole bunch of stuff actually probably be here when you turn it and it gives me this little arrow thing and it's the same in chrome it's a little different in Safari it's like a pointer or like a target thing or something but this lets me go on top of stuff and highlight what it looks like and what's actually going on and if I click on this one here and gives me their properties but if I go to computed or layout I can actually see the box model so the box model is my margin my border my padding and the content itself inside so you can see what I'm doing this it's highlighting the different parts so I have the content itself and that yellow area is the margin on the top I go on this one there's the yellow margin on the bottom so you can see that the two margins they both have a margin but the margins are the same size and they're just merging into one another so if I take this one and I make it 200 pixels that one's gonna win so here I have a hundred pixels and it just stops because that is merging in to this one here which is 200 so the bigger one is gonna win and that's it and then my smaller one there is just smaller and does is effectively nothing it's it's useless the small one is literally not doing anything at all so you can see it's a little bit of a weird behavior but you wouldn't think that would cause too much issue because it's not often you'll run into stuff like this where you're trying to create a bigger space like that right where this becomes a big issue is on my first box here at the top I'm gonna add a margin top to my box one and you might have run into this before so you might be going you know what's gonna happen trying you know the the logical thing would be it would move it down inside my box my demo box here so let's add like 300 pixels to make it big and obvious and what just happened my whole box move down I hate this so much personally but you know we live to get around it and I just I don't like it because it's not intuitive and I like things when they're intuitive and they work the way you expect them to and no one would expect something like that to happen unless you know about it obviously so what's happening here is I mentioned before if the margin bottom of this and the margin top of this were touching they've merged together so in this case because my one and my demo box both start at the same point even though this is the child of this one they're both lined up together at the top so their margins technically are touching so if their margins are touching they merge together so if I go and I look in my inspector here sometimes you're hovering around trying to figure out what's causing it you can't move there's a big empty space I don't know what it is that's not just my body there must be something else eventually you figure out it's the thing inside the thing that's actually causing it because you know whoops let's just click on here if I use here so I'm I won but if I'm looking at it in here I'm going I'm looking at my demo box and there's a huge space on top of my demo box I don't get what's going on I see that there's the my margin here and here but yeah I set that up what's going on why is there that giant gap oh it's coming from this and sometimes it's not even this one right it's like nested like seven deep because you just have a bunch of divs going on or something so it can be a bit annoying to try and find but yeah that that's kind of weird now one solution I've seen or just to show you you know what what I mean by the the margins touching is if there's anything to create a separation between them so here if I give this a border top of say 15 pixels so we can see it solid black it gives me a border so now I have a hundred pixel margin then a border and then my 300 pixel margin so this border is going in between the two margins it's creating a separation between the two they're no longer touching each other so there are no longer collide singing or merging together so one solution I've seen from time to time is padding top one pixel so what's happening here is we can't even see it it's so small so let's just make that like 10 pixels so we can see it on our screen see that purple line now on the screen at the top here just over here we'll see that purple line that's the padding so the padding is creating a space between the margin and the content inside of my demo box so that's creating a separation between the margin of this and the margin of this so I've seen people set that to one just to create a little like invisible line and then use their margin on this like they would expect to but why do that when you could just say that this padding top is 300 and then you don't have to worry about a margin on that at all you're already setting a padding top on this anyway so just do it all in that so again padding is creating space inside of something margin is creating space outside of something but padding is a lot more behaves in a way you'd expect it to behave a little bit more so padding doesn't merge because it doesn't margins can merge together or collapse together is the technical way of saying it so you might be saying I'm never gonna run into a situation like this these boxes this isn't a realistic thing so let's look at something a little bit more realistic and we're also gonna use this to push things a little bit more into our resets and and look at some other behaviors that you might not expect as well so here we just have some basic text again there's some more styling down below that doesn't really matter too much for what we're doing here so here I have this nicely set up I'm happy with my text but there's some stuff I want to do one here so one thing to know is that by default all text has margin on it that's why we have space around everything here right so I'm getting all these spaces everywhere this is all just coming from margin all our text as margin not for sure cuz h1 sits a little smaller but as a general rule of thumb the margins on your text is about the size of the text size it's usually set to 1m it's like point eight three or something for each one so here I have a div class of intro and then ivon h1 inside of it so what I see sometimes happen is someone does intro background blue that's good light blue maybe so it looks a little bit light blue there we go so that looks okay but you know what I don't want my I want my text to be a little lower down I don't really want it to be there and well they're already doing some styling so they already have like their intro each one they have you know font size - let's do like I don't know 50 pixels make it bigger something like that and then they go Iowa the color is steel blue so they're styling wait they're text so while they're in there texting I want some more space around it so let's add some margin top of 50 pixels oh I thought it didn't work let's make it bigger and weight the whole that can't be right I'm putting it on my text I want the space on my box my box my text is inside my box this is the collapsing margins guys even though in a lot of the time this is just the way that the text is rendering you'll get like a spacing around it so it looks like your textures and touching it but it is cuz you have your intro and then you have your h1 so what's happening is this is merging with that then they go okay let's just like add like padding of like 10 pixels here and like boom it's massive okay because they have the whole thing here so we can just take all that off but now okay I have my padding of 10 pixels but that's not ten pixels that's huge what's going on why is it so big now this is because of the default margin on here so I'm just gonna do a little inspect on here inspect is your friend it's always what's going to solve your problems so you can see h1 has a margin top and a margin bottom so you can see that we have a margin top and bottom on there and after the margin there's a padding so what you'll often have to do when you really want to control how something is gonna look is then have a margin of zero on it so now that there's a margin zero on it I can control exactly how big I want this padding to be whether I wanted to be ten fifty whatever I want now the font is rendering a little because there's some extra space on the top and bottom so it's not perfect but you get a much more fine tuning once you get rid of those margins now just really quickly if we look at all of our text all of our text has a margin top and bottom and what's happening is you can see here and this one they're merging together they're doing the whole collapsing Martin thing and here and I have my list there so we can see that they're collapsing together and once again here they're collapsing together we have tons and tons with text is just constant collapsing margins oh and just one thing really fast in case ever you're you're doing something and you're like some spacing issues get really weird I'm a demo box here if I change this to a display grid because you want to use some nice CSS grid stuff let's just undo that see how everything it's collapsing margins so like my spacings not terrible and then when I turn off that and see how the spacing just all got a lot bigger so display grid collapsing margins no longer collapse and this is the same also for display grid display grid then a current flex flex box is the same thing I'll also have to do like Direction column for this though so let's turn off my display flex you can see they're closer together and when I turn that back on they all get spaced back out so just to know sometimes when you change the parent container it changes the way the collapsing margins work on the children weird it's how CSS works and it's with display flex display grid I think is the only time that actually happens but don't take my word on that there might be then those are the times to probably run into it the most anyway so just be aware that that might happen so a lot of things come with a lot of different things come with our defaults so like we were just looking at so again if I look here I have my paragraphs my h1 all the way to h6 h2 h3 here I have a pre for like code blocks and stuff those have margins on them this is a list my list items all have padding and margin on them figures have margins on them everything this is a quote I think is that a quote that's just a paragraph okay well it's just a paragraph I don't know it's indented but you know everything comes with some sort of default on it almost it's it's kind of frustrating so one thing you might want to do and you don't have to do this but a lot of things that people do especially when they're first starting off is they just want to turn all the margins and padding off all of them off because that way they don't run into issues like this and there's not these weird things happening so we can do that with the wild card selector which is just this this just means select everything selects everything any element it's selected the only thing this one won't be selecting is pseudo elements but we're not going to get into that and they're our way of selecting those two but we can do this so I'm selecting everything and I going to say margin:0 padding:0 and when I do that you can see everything just gets stuck together now my lists get a little screwed up because they had their padding so this does mean you're overriding everything so if you do have lists you do probably want to have to add padding back to them so they're not sticking out the side and looking really ugly it might cause some issues along the way with some other stuff so just be aware that you're starting from scratch but sometimes starting from scratch is easier because you probably wanted to change a lot of those things as well so now what I could do is I could just say h1 h2 h3 margin bottom is like 0.5 M and even margin top is say 1m so what that's meaning is the space on the top is bigger now then the space on the bottom and to me that makes more sense because now the heading is closer to the content that it should be with which is an important thing we'll be talking about more in the next video I could say my paragraphs have only a margin bottom of even like 0.75 M maybe if you'd not sure about m/s it just means that so you have my font size is 10 this would be 7.5 it's in relation to the font size so your font size is 20 then it's 75% of it this would be 50% exact we the same so my font size is 50 my margin top is 50 I do have a whole video on m/s and REMS if you're curious more about those um but we're not going to get too much into that but yeah it just means you're coming through and you're manually bringing it all back in afterwards so you do have to take into account that this can cause some issues like with my lists here that you'll have to be doing everything from scratch and maybe you don't want to do that if you're used to the defaults sometimes that's okay and you get used to it and you just work around them but sometimes the defaults really do cause some issues and it can be easier just to reset everything and then move on from there also just here I'm adding margin top on my headings but pretty much for everything I try and use margin bottom only just by sticking with margin bottom on everything you know where your spacing is coming from use your padding all over the place because padding is a little bit different because you're pushing things inside you're adding background color to stuff but when it comes to margins just as much as possible and there's always gonna be exceptions but if you can just go I'm always gonna use margin bottom you always know where the space is coming from you just look at it I look at this I see a space I know where that space is coming from I know you just know because it's always coming from the thing above because that's your everything is margin bottom so that could be one if you are using a reset try and stick a margin bottom all the time and it will probably make your life a lot easier in your own coding okay so with that out of the way let's get into the last thing of this video which is box sizing and this is what can also make your life a lot easier so to look at this I'm actually gonna go back to this video right here and let's go down to number three because we never got to play it with number three and he's lonely so I'm gonna give him a width of 100 pixels alright and let's actually put some content in here let's make its height a bit bigger too it's making a little an actual box and let's just write hello world in there so we have some content does that fit it's a little tight color white and you know what let's take these two out because we don't need them okay so we have hello world perfect Oh oops and you know what make this a little bit bigger just there we go okay we're good so here I have my box it's 200 pixels by 200 pixels and I have this text inside of it now I don't want my text to be touching the side or touching the top I want to create some empty space around that so you know let's use some padding so I mean your padding top 50 pixels and a padding left of 50 pixels but oh man my whole box just got bigger because remember the total size of something is the margin plus the padding plus the border all three of those come together to make the total size so now my box is actually 300 pixels the 250 pixels tall because I added 50 pixels and it's also 250 pixels wide here oh that's kind of annoying right and just to show you let's turn number two back on just for a second and we'll actually just do height 200 pixels width 200 pixels let it just be like our our baseline so this was the original size and now we can see that it's gotten wider and that's annoying because then I have to go all my width is actually now has to be 150 and this should be a hundred and fifty okay let's go take a look again okay now it's you know what them I think it's a little big let's actually make this 30 and 30 whoops where do we go 30 and 30 oh man now I have to change this to 170 and 178 the picture it's annoying you have to keep sort of playing with them you don't want to do that do you know you don't so what we can do for this is we can use box sizing so box-sizing the default is content of content box which means that the size of the box is on this one here the content let's hover on this boom there we go so the size of the box when I'm giving it a width and a height is calculated based on the content box it's looking at only the content box we can change box-sizing to border box there's no padding box they tried I think they they wrote a spec for it but nobody supports it so there's no padding box there's content box and border box there's also no margin box content box or border box and oh look at that smaller now so what's actually happening now is whoops 2000s a little big it's calculating the padding part as part of the total size so it's going okay I need to be a total height of 200 pixels so my padding is 30 so my content will be 170 and the same here for the width well I need to be 200 and I have 30 so I'm going to adjust my content box inside to be 170 so my total is 200 and if we come when we add a border around here border 25 pixels solid red you can see it's adding that border inside of my box instead of adding to the total size because if we take this off it's by default everything would add to the total size so the border box just makes for me makes my life so much easier because now instead of always having everything get bigger and bigger and bigger and having to really figure out your widths and Heights and well Heights you probably won't use too much but you it can get annoying so this just make sure that padding is always adding to the inside of your box it's really just pushing things in it's not creating extra empty space on the yeah it's not creating extra empty space it's just pushing things inside your box which i think is a more intuitive way of working and in a lot of projects since you're already setting up something like a reset or if you are setting up a reset and even if you're not you can still use this I can't come on here and say that your box sizing is order box and I do that like all the time I don't usually actually use my reset just I don't know why but I will use this pretty universally I find this is like a lifesaver it just makes things much more intuitive and easy to work so it makes padding make a little bit more sense and it makes it work the way you sort of expect it to so you know a long your your resets that you did you can just add it in there so I hope you've learned something about what we discovered and if you did of course leave a comment down below to let me know or if you have any questions don't be shy go down to the comments as well also if you ran into a strange behavior or something you're not understanding with margins or padding's that I haven't talked about please also let me know down in the comments if you liked this video and you haven't yet subscribed to my channel I encourage you to subscribe because you get more content like this every single week next video we're going to be looking at is a real world example of using the white space that we can create with margins and padding to make a really nice-looking layout before we get to that though I just want to give a big shout out to all my patrons who helped make this possible if you'd like to support me or just learn more about what patreon is there is a description down below and until next time don't forget to make your core in the Internet just a little bit more awesome

Channel: Kevin Powell

Views: 60,249

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, collapsing margins, box-sizing, css box-sizing, what are collapsing margins, how do collapsing margins work, reset margins and padding, css reset, margin and padding, margin vs padding, margin and padding deep dive

Id: uEfH6qnFF6Y

Length: 22min 59sec (1379 seconds)

Published: Wed Dec 13 2017