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

Key Takeaways

hey guys CSS Box model let's [Music] 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 going to come down here and we're going to start doing a little bit of CSS uh another thing that I'm going to throw in that I haven't looked at yet is some comments cuz I think they're going to be useful if you remember back in HTML sorry I said we weren't going to be in here but we'll 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 CSS comments and CSS comments slashstar this is my comment star/ closes the comment so it's a little bit easier to write and uh let's do this is the the Box model the CSS Box model to be exact okay um so I have my CSS Box model that we want to explore and it's a weird name kind of weird in general but but it's not too complicated so um what I'm going to start with is I'm just going to give my box a background and let's make it Pink I've been using pink a lot but it stands out nicely on this background without being too abusive on the eyes um 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 going to give this box a width of 300 pixels and I'm going to save that and hit refresh so now I have a box that's 3 00 pixels and the height is 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 is why I want to show you comments but the three different parts are margin we'll be looking at what that is I have uh padding and I have the border and I put those in the wrong order but that's okay uh a little cut paste there we go um so I have my Let's 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 going to do a margin of 50 pixels I'm going to save this and I'm going to hit my refresh button and you can see it moved over a little bit so it sort of popped off to the side uh 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 uh 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 pix 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 then we go I got 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 uh with say I can do a margin top of 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 I 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 uh let's just bring that back to a margin 100 pixels and refresh and there we go there's my box and let's take it next look at the next one uh 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 uh we have a border uh 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 going to have a border style and I'm just going to put 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 going to hit refresh and you can see it's put a border all the way around my box and that's pretty simple um it's a red border it's 5 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 going to 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 a border right right uh width of say 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 uh it doesn't really matter the order that I put them in with color style and withd style color and you could any order you put them in it will work fine but what if you forget one of them let's take off my border left style and it just disappears completely including the width the width just doesn't uh isn't included there so uh what if I forget the color the color will go to a default and if I forget a [Music] size it shows up anyway I didn't save my CS say ah there we go um 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 uh you can just do border and write the three properties you want 5 pixels solid green and I get on all sides or you could of course do a um border left 5 pixels solid red and I wonder what's going to 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 happen is it's making the left border red and then it's coming here and 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 then going oh the one on the left should be red instead and we can do that uh I mentioned that there's other options in solid so let's just keep that and uh let's just change border style and uh dashed dotted double Groove hidden means you don't see it none we don't see it uh inset Ridge solid outset uh a lot of these are really ugly just so you know uh let's try the groove and what's going to happen now is it's going to set them all to Green solid it's going to make the left one red and then my border style instead of being solid is going to get overwritten again and turn to green and let's just make this a lot bigger uh 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 inset one too many semicolons in set and it does another really ugly one let's try the Double's not terrible double is a double border uh there's dotted gives me Square dots uh this obviously looks better if it's a smaller number not as ugly even though I wouldn't not super nice either right now uh but you get the idea uh 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 going to make the value of them both the same and right away you're going to see the difference I'm going to hit refresh here and well look at that my box is huge now padding and margin both work in a very similar way uh 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 um 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 uh there we go so uh but it's a very big difference margin is pushing away from things empty invisible space padding is creating empty space 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 or different sides padding top 25 pixels padding left 20 let say 50 pixels padding right 100 pixels and padding bottom 300 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 uh 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 going to change a a little bit I think yeah I didn't keep the same numbers uh this is going top right bottom left and the that's not the way we end a comment and let's put that underneath there we go so top right bottom and left uh it's like a clock so we start here and we go around clock wise 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 tell you go clockwise and then it sort of makes sense I can also uh 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 uh if I put two values pixels you'll see that it's doing it's starting at the top again so it's going I keep doing this the wrong way it's doing top and uh 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 and 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 Zer we'll make it 100 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 so200 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 that's 300 pixels starting here and ending right here and I'm going to bring up something uh it's called inspect element it's just going to help us visualize all of this a little better and I do have an entire video on this but uh just very quickly you can see there is my paragraph and there we go this is what I was looking for uh 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 100 on my margin plus 100 from my margin because remember this margin is left and my margin on the right plus padding of 25 on the left plus a padding of 25 on the right plus a border of 10 plus a border of 10 which should give me let's see how fast I can do my math uh 3 four five 550 56570 hopefully I got that right gives me a total width of 570 pixels right now this might not seem like the most important thing to remember but very soon we're going to 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 around my element border is uh a border or stroke around my element stroke for anyone who's coming from Photoshop or illustrator and uh padding is empty space with background around my element and all of these add on top of my on top of the width and height and the width is really the more important thing here so um 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 do 500 on all sides uh and now I have like my big scroll bar here even though I've only told this that it should be 300 pixels it's clearly not only 300 pixels cuz I have my big scroll bar 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 things to remember in there but uh 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 you know borders around my box and all of those add on top of the total size of my box so 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 what way you write it here if padding comes first it's still going to 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 going to keep getting through this very soon you're actually going to be 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 uh I can't wait to see you at the next video