Learn CSS Box Model In 8 Minutes

in today's video I'm going to be covering every part of the box model so you can easily understand how to position elements using width padding border and margin in CSS let's get started now to get started I just have two boxes off to the side here with the text one and two and background colors of red and blue these boxes are represented in the CSS as box 1 and box 2 I've also removed all padding and margin from the page so their boxes are pushed right to the corners of the page and to get started explaining the box model in CSS is to understand that everything in CSS is a box of either a rectangular shape or a square shape and it doesn't matter what you have in CSS it's a box whether it's text a button a div a span every single element in CSS is a box and these boxes have different parts you have the actual content of the box which in our case is this text 1 and this text 2 you have the padding of the box and then you have the border and the margin and we're going to go through all of these different sections and how they interact to form the box model so the easiest thing to understand is the actual content of the box if you do nothing to a box at all the content of the box is just going to fill up the space inside of the box and the box will be no larger than the content but if you start adding different things to the box then you can start to expand the size of your box so for example one of the easiest ways to make your box bigger is to use padding so let's add padding to this element will just add 20 pixels to box 1 if we save that you see that our box has increased by 20 pixels on all sides everything is pushed away from this one text by 20 pixels and that is because padding occurs inside of the background of the element it occurs inside the border essentially and it goes around the content of the element so the content is the very most inside thing in the box model then we have padding next which will include the background color of an element so most of buttons in CSS are styled using padding so that the background of the button becomes wider than the actual text of the button itself the next thing we can talk about is the border of an element so if we change this border size here to also be 20 pixels it's going to be a nice purple color we can we give this nice purple border that goes around the padding of our element so we have our 20 pixels of padding around our content and then we have 20 pixels of border around the padding which is around our content and the very last thing that we could have on our element is margin so if we just add 20 pixels of margin to our element you can see that is spacing on the outside of our border and margin is what we usually use to space two elements apart from each other padding is mostly used to add background to an element to make a go around the content and margin is specifically to go around two different items to make them spaced apart from each other so now let's change these values so that we can see the difference between them so we'll just make them all completely different if we say that you see that we now get this element here and if we right click on this and go down to inspect we can see the different styles so if we click on this computed tab we can see using chrome dev tools all the different sections of the box model this rectangle right here is the box model and on the inside this blue section this is the actual content of our box as you can see it's the thing that surrounds the one when we highlight it you can see that it is just the very intersection content of our box we can specify distinct sizes of our content using the height and width property so if we set a height here of 100 pixels and we set a width of 100 pixels you can see that we now have a 100 by 100 square and this blue section is that 100 by 100 next we have padding which is this greenish color that you can see and you can see it's 10 pixels that goes directly around the word 1 you can see it just it barely touches it so this is just around the content and it also goes outside of that height and width that we've defined next is that purple border which we can see by hovering over here and it's around the padding as I've said and then lastly this margin which goes around the element itself on the outside of the border and it's used to break apart two elements from each other so now let's do a similar thing to box number two we'll actually just copy all this code down to box number two well paste here we'll remove the margin for now and we'll save that and we see that our box number two is showing up right here and now if we add a margin of 60 pixels to the box you would think that the box would end up moving down because it needs to move 60 pixels further away from box one what if we save that you see that it doesn't actually move further away and that this sixty pixel margin is the same between these two elements there's only sixty pixels here and not 120 like you would expect and that's because in the box model margin actually collapses between two elements that are next to each other so since these elements are right next to each other and they both share a margin whichever margin is the largest is the one that will be used so if we change this to 70 for example they now have 70 pixels of margin between them and even if we decrease this down to zero you can see that it still has that 70 pixels of margin between them but if we make this 100 it now has 100 between these two elements and you can see that by just hovering over here we see that 100 margin and if we select box 2 it has that 70 margin but only 30 more between here and here because this is a 100 margin between the elements another thing to note is that if we hover over box 1 here you can see down in the bottom left it says that the height and width is 180 by 180 but we actually defined our height and width to be 100 by 100 and that's because by default in the box model to get the height of an element as the other the height plus it adds together the padding on the top and bottom so in our case 10 on the top 10 on the bottom would be 20 so where our 120 does the same thing with the border on the top of the bottom so we have 30 top bottom which would make it 60 so now we're at 180 right here and that's how we get 180 as the height margin doesn't account into the height of an actual element for sizing using CSS by default but if we wanted to change this so that our height and width right here are the actual height and width of our element what we would need to use is we need to change the box sizing of our element to be border box and what border box does is it makes this heightened with account for the padding and the margin or the padding and the border of our element so it was change this border down to 20 pixels so it's a little bit smaller and if you save that you see that if we go to our box number 1 our content section is only 40 by 40 in the other example without this border box there you can see it's the heightened width 100 by 100 but when we use border box the actual size of the content gets subtracted out from the border and the padding so that the when we hover over this you see our actual element is 100 by 100 instead of adding all of these it just uses this height and this width and the border and padding just cut into that height and width as you can see our padding is still there and our border is still there but the actual content of our element was shrunk down to be 40 by 40 so that the overall element everything inside the border is a total of 100 pixels instead of being 180 when it comes to learning the box model the easiest way to do it is to use these chrome dev tools and you can see each of the different sections of your element from the content padding order and margin and even has a nice little diagram so you can easily tell what is what and what you're actually defining but some good notes to take away is that if you want to space two elements away from each other use margin that is definitely the best way to do it using CSS and if you want to space out an element from itself you need to use padding because padding is inside the border which will include the background color and margin is outside the border and that's really all there is to the box model in CSS one thing that you may notice is that we use this border box property and this is something that is almost always used in CSS because it makes styling things so much easier so many times this will get added to the universal selector so that every element will use border box because it's so much easier when whatever you write as the heightened width is the actual heightened with the element and you don't have to worry about doing math in your head when you make these values so I hope you guys enjoyed this video if you did please make sure to subscribe to the channel for more content just like this and check out my other CSS related videos which are going to be linked over here thank you guys very much for watching and have a good day

Channel: Web Dev Simplified

Views: 189,836

Keywords: webdevsimplified, css box model, css box model tutorial, css box model explained, learn css box model, css box model explained fast, css box model quick, css box model fast, css box model example, box model tutorial, box model explained, box model css, box model css tutorial, box model css explained, box model for beginners, css padding vs margin, css padding and margin, css padding vs margin vs border, css padding, css margin, css spacing, learn css box model in 8 minutes

Id: rIO5326FgPE

Length: 8min 22sec (502 seconds)

Published: Sat Mar 16 2019