HTML & CSS for Beginners Part 12: The CSS Box Model - Margin, Borders & Padding explained

hey guys CSS box model let's go so I've got a really simple page here we have our title I've got a div with a class of box on it with a paragraph in there and everything we're going to be doing today is with our CSS so I'm gonna come down here and we're gonna start doing a little bit of CSS another thing that I'm going to throw in that I haven't looked at yet is some comments because I think they're gonna be useful if you remember back in HTML sorry I said we weren't gonna be in here but look this is an HTML comment and there's my HTML comment it's just a little reference for myself we can also put comments in CSS but if you use an HTML comment in CSS it will break your CSS and cause things not to work and that causes a whole bunch of heartache and you're wondering what you did wrong and it's really annoying so do not use HTML comments in there you have to use the CSS comments and CSS comments /a star this is my comment star forward slash closes the comment so it's a little bit easier to write and let's do know this is the box model the CSS box model to be exact okay so I have my CSS box model that we want to explore and it's a weird name kind of weird in general but it's not too complicated so when I'm gonna start with is I'm just gonna give my box a background and let's make it pink I've been using pink a lot but it stands up nicely on this background without being too abusive on the eyes so I have a box there's my box it's nice and pink and the next thing I'm going to do is I'm gonna give this box a width of 300 pixels and I'm going to save that and hit refresh so now I have a box it's 300 pixels and the height just just automatically calculated and I can obviously come in there and give it an actual height as well if I want now there's three different parts to the box model and this why I want to show you comments but the three different parts are margin will be looking what that is I have padding and I have the border and I put those in the wrong order but that's okay a little cut paste the real so I have my line it all up I have margins borders and padding and we're going to be looking at all three of them margin is nice and simple I'm gonna do a margin of 50 pixels I'm gonna save this and I'm gonna hit my refresh button and you can see it moved over a little bit so it sort of popped off to the side let's make that even bigger let's make it 500 pixels so we can really see it and it's moving all the way down there and I even have a scroll bar going up and down on my page now what margin is doing is it's creating an invisible space all around my box that nothing can go in so let's add a little bit more text actually after this we could use another paragraph so I'll just copy this one so I've got this 500 pixel space and just to show it even more there's my paragraph after so I have 500 pixels here and then I have 500 pixels here and I have 500 pixels there it's pushing everything away by 500 pixels and it's even doing 500 pixels on it's putting 500 pixels on all sides so let's jump back up to here and let's just make that a more reasonable 50 pixels save that refresh and there we go 50 pixels here 50 pixels there and 50 pixels over here as well and well that's what margin is it pushes things away and we can control any of these with say I can do a margin top 50 pixels so it's only going to look at the margin top so here I have 50 and then those ones it's keeping at the defaults that we had before now you do a margin bottom of 100 pixels save and it pushes that down 100 pixels I can do a margin on the left of let's say 200 pixels and it will push it over by 200 and I could do a margin on the right too except we won't see anything happen because there's nothing over here on the right side so let's just bring that back to any margin 100 pixels and refresh and there we go there's my box and let's take it next look the next one is our border border has three different properties that we need to worry about so it's probably the most complicated one or it is we have a border width first of all so I'm going to do a 5 pixel border I'm going to have a border color of red and I'm gonna have a border style and I'm just gonna bit solid for now it's the one you'll see the most often but we'll look at a few different border styles in there so I've saved that I'm gonna hit refresh and you can see it's put a border all the way around my box and that's pretty simple it's a red border it's five pixels thick and it goes all around the sides just like my width I can add a border only on some size so I could say border left and I'm just gonna copy that save refresh and I only get a border on the left and you know I could actually use this and then come in with our border right width of 10 pixels border right style of solid and a border right color of green and refresh and then I get a green border over on that side you'll also see it doesn't really matter the order that I put them in with color style and with the style of color and you could any order you put them in it will work fine but what did you forget one of them let's take off my border left style and it just disappears completely including with the width just doesn't isn't included there so what if I forget the color the color won't go to a default and if I forget a size it shows up anyway I didn't save my CSS bad there we go the width does have a default on it so if you forget the width you should still see a border it's defaulting to what looks like two pixels if you forget the color it will go to a default color and if you forget the style it just won't show up so make sure you have a style there is a shorthand for all this you can just do border and write the three properties you want five pixels solid green and I get on all sides or you could of course do a border left five pixels solid red and I wonder what's gonna happen now I have a border and a border left well this one is second so this should work and this should overwrite the left side and there we go my left border is now red whereas the rest of them are all green if I accidentally put this one up here it doesn't work because what's happening is it's making the left border red and then it's coming here going well all my borders are green so all the borders are becoming green the order here really matters it's a continuation of the Cascade and the way the Cascade works it's reading through this in order so it's making all of my borders green and they like oh the one on the left should be red instead and we can do that I mentioned that there's other options and solid so let's just keep that and let's just change border style and dashed dotted double groove hidden means you don't see it none we don't see it inset Ridge solid outset a lot of these are really ugly just so you know let's try they groove and what's gonna happen now is it's gonna set them all to green solid it's going to make the left one red and then my borderstyle instead of being solid is gonna get overwritten again and turn to green and let's just make this a lot bigger 15 just so you can see it a little more it's putting this really ugly 3d effect on it that's the groove let's try it in set one too many semicolons inset and it does another really ugly one let's try the double is not terrible double is a double border there's dotted gives me square dots this obviously looks better if it's a smaller number not as ugly even though I wouldn't not super nice either right now but you get the idea in general solid is what I'm going with and in general I'm not overwriting the same style a whole bunch of times I'm making one style and I'm sticking to it and let's make that 10 and there we go I got my red border now the last one is padding and people mix up padding and margin all the time because they work really similar to each other so I'm gonna make the value of them both the same and right away you're gonna see the difference I'm gonna hit refresh here and won't look at that my box is huge now padding and margin both work in a very similar way and they both create empty space the difference is margins create empty space without a background color padding creates empty space with the background color and that's a very big distinction the problem is if you don't have a background color you don't see the difference especially if you don't have a border either they both look like they're sort of doing the same thing I have margin and I have padding what's the big deal let's bring that back so we have our box there we go so but it's a very big difference margin is pushing away from things empty invisible space padding is creating empty faced with my background color and that's a very very important thing to remember I think I need more background I need padding and just like all the other ones I can do different things I can say are different sides padding top 25 pixels padding left 25 say 50 pixels tabbing right 100 pixels and padding bottom three hundred pixels make a big big padding on the bottom there so I have my 25 on the top 50 on the Left 100 on the right and my big 300 pixels down here on the bottom both for margin and for padding there's shorthand for doing this if you want things to be different though so let's say I want my padding and I want to do 50 on the top 100 on the right 300 on the bottom and let's just do 25 on the left this time it's gonna change a little bit I think yeah I didn't keep the same numbers this is going top right bottom left and the it's not that way we end a comment and let's put that underneath there we go so top right bottom and left it's like a clock so we start here we go around clockwise and that's the only way you'll ever remember it if you try and just go you know the order of it seems pretty random and then till you go clockwise and then it sort of makes sense I can also shorten it up so we know if I just do 100 pixels it's just going to put 100 pixels on all four sides and if I put two values pixels you'll see that it's doing it's starting at the top again so it's going to keep doing this the wrong way it's doing top and well I can't fit it in the way I'd want this first value is top and bottom and the second value is left right so if you know your top and bottom are the same and your left and right are different from the top and bottom but they're the same as each other you can write it out like this and it's much faster to do and you can do the same thing with your margins so 100 pixels and 0 will make it a hundred on the top and bottom and zero on the left and the right so it should come close over to here you can add a third value in there so 100 and 200 pixels means 100 on the top zero left and right and 200 on the bottom so my left and right are the same my top is this and my bottom is right there and you can do that for your padding as well and let's just change that one back to 100 now the last thing to remember with the box model is the way widths are calculated so right now the width of my box is 300 pixels and that's 300 pixels starting here and ending right here and I'm going to bring up something it's called the inspect element it's just gonna help us visualize all of this a little better and I do have an entire video on this but just very quickly you can see there is my paragraph and there we go this is what I was looking for the blue box there has the width of 300 pixels on it so I have a 300 pixel box but then on the left and the right I have an extra 25 pixels of padding so I have 25 pixels here and I have 25 pixels here and then I have an extra 10 pixels here and an extra 10 pixels here and then I have an extra 100 pixels here and one extra pixels here 100 extra pixels here all of this together is what gives me my total width the height is the same thing the height of it isn't well I don't have a height set so height doesn't really matter so the total width of this whole thing isn't 300 pixels the total width of this entire thing is 300 pixels plus a hundred on my margin plus a hundred from my margin because remember this margin is left and my margin on the right plus padding of twenty-five on the left plus a padding of twenty-five on the right plus a border of ten plus a border of ten which should give me let's see how fast I can do my math three four five five fifty five sixty five seventy hopefully I got that right gives me a total width of five hundred and seventy pixels right now this might not seem like the most important thing to remember but very soon we're gonna have two things that go next to each other and if they run out of room they don't go next to each other anymore they fall one on top of each other so understanding how the box model works we have our margins our border and our padding so margin is empty space around my block or on my element border is border or stroke around my element stroke for anyone who's coming from Photoshop or illustrator and padding is empty space with background around my element and all of these add on top of my on top of width and height and the width is really the more important thing here so I'm not you know I'm setting a width of 300 but this is much bigger than 300 now and just to show you padding of say 500 and right away you'll see whoops let's just you 500 on all sides and now I have like my big scrollbar here even though I've only told this that it should be 300 pixels it's clearly not only 300 pixels because I have my big scrollbar it's way too big for my screen now so that's the CSS box model it's not too complicated there's a few to remember in their but the biggest takeaways margin is empty space pushing things away padding is empty space that includes my background so every time I need more background I add padding and the border gives me borders around my box and all of those add on top of the total size of my box I have the original box plus my margins plus my border plus my padding and it's important to remember and they also go in that order I didn't mention that but it's always my box my padding my border and then my margins on the outside of that and it's always going to be in that order it doesn't matter which way you write it here if padding comes first it's still gonna look exactly the same you can't change the order of them so that's it for this video hope you liked it and I'll see you in the next video we're gonna keep getting through this very soon you're actually able to make your own page with your own layout and we're getting close again if you have any questions any comments make sure you leave them down below in the comments and I can't wait to see you at the next video

Channel: Kevin Powell

Views: 61,162

Keywords: HTML, CSS, Tutorial, How to, HTML & CSS for beginners, css box model, margin, margins, padding, borders

Id: M6coJNLFBWI

Length: 18min 52sec (1132 seconds)

Published: Thu Nov 03 2016