2.7 Box-Sizing

Hello and welcome back to Understanding the CSS Box Model. In a previous lesson, we talked about setting up a two column system using the default settings of the box model. And when we did that we had to pay very close attention to our math because if we did anything minor, such as adding a one pixel solid red border to our file, then if we were to look at that in a browser, you'll see that our columns are broken up. Now, if we were to take that border away and save our file and refresh, you'll see that we have two columns, and everything works fine. But once you start adding padding and margins and borders, you've really gotta start paying attention to your math, or things aren't gonna work right. So again, let me put this back where it was, like so. And let me save this with a new name. And we're going to talk in this lesson about another way that we can get around that without having to worry about the math so much. So in our project files folder I'm going to save this columnsend.html file as boxsizing.html. So I'm going to save that and let's say that we want to keep this one pixel solid red border. Well let's save that and jump back into our browser and let's point to that file, box-sizing.html. And if we wanted this border, we would need to shrink our column content a little bit. So we have one pixel on the left side as well as one pixel on the right side of our columns, so now we need to reduce the width of our columns by two pixels. So instead of 390 we might set them to 388. So we can save that, jump back into our file and refresh and now we've got enough room for both columns. But as you can see the inside of those columns, the text is right up against that border. So we might want a little padding in there so we'll jump into our columns, we might add some padding of maybe five pixels. But when we save that and refresh, we're gonna jump back down to one column stacked on top of another because once we add padding, that's gonna change the width of our columns. They're gonna get wider and there's no longer room for both of them. So again we've gotta go back in and check our math. So we added five pixels of padding. That's gonna add five pixels to the left and to the right so we need to reduce our width again by another ten pixels, in order to fit both columns in. So we can save that and refresh and now we're back to where we want it to be. Well wouldn't it be nice if we didn't have to do this much math whenever we're laying out our content? Well everything that we've been talking about so far has been working under the assumption that we're using all of the defaults settings of our box model. And as I've said dozens of times before with our default settings, any time we add padding or borders or margins, that is going to expand the footprint of our boxes and they're gonna take up more space, they're gonna get larger. Well, there is a CSS property which you may or may not have heard of before called box-sizing. And by default, that box-sizing property is set to a value of content-box. So if we were to go to our columns here, and if we were to add a box-sizing property here and give it a value of content-box, save that and refresh, everything looks the same. But let's say that we didn't want to mess with our math. Instead we just wanted to define the width of our column and let that be the final width no matter how much border and padding we added. So, let's change our width here to 400 pixels. The problem right now if we save that and refresh is that our boxes are now too large. Because they are 400 pixels plus the padding and border and everything else. So, what I'm going to do is I'm going to change our box-sizing property. Instead of content-box we're gonna set it to border-box. So I'm gonna save that and refresh our page and you'll see that it still doesn't get us exactly where we wanted, but if you noticed when we refreshed the page, our columns did get a little narrower. But with the border-box value on this box-sizing property, what it's doing is it's taking the width that we've determined, and that width has now become the total width of that column, including borders and padding. Now the one thing it does not include, is margins. So we've still got a margin-right of 20 on this column, and that's what's causing it to be too wide to fit on one line. So if we were to get rid of this margin-right, let's just set it to zero for now, save our file, refresh our page. We now have two columns side by side. Now remember our container is exactly 800 pixels wide and we set each of our columns to 400 pixels wide. The problem we encountered before is that once we added padding and borders, that 400 pixels suddenly became 420 or 425 pixels depending on the size of your padding and the size of your borders. But with this border box property, instead of expanding the size of your box whenever you add padding and borders, it's actually decreasing the size of the content inside the box. So when you use this border box setting, no matter how much padding you add and no matter how thick your borders are, your width is always gonna end up being 400 pixels. Again the only thing that's not taken into account with this width, is the margin. So if we want to add some margin it will still require a little bit of math but not nearly as much as we had to do before. Now we could set our margin right to 20 pixels and then since we have two columns we can make up that 20 pixels by taking 10 pixels of width off of each column. So we'll just set our width here back to 390 pixels, save that and refresh. And now we've got 20 pixels of margin in between those two columns. So as you can see using this box-sizing property and setting it equal to border-box really does make the process of laying out your content a lot easier. Now, instead of having to do a bunch of math to get all of your column widths where they need to be, you can simply set the final width of your column, making room for a little bit of margin, and then everything else is taken care of. And if we were to change our border to ten pixels and our padding to 50 pixels. If we save our file and refresh our page, you'll see that we still have room for both columns. The only thing that's changing is the size of the content inside those columns. That content is now smaller inside those columns to make room for that extra padding and those extra borders. So if you don't like making notes with a pencil on a scratch piece of paper every time you try to lay out your content, then this box-sizing property will be your best friend. So thank you for watching, and I'll see you in the next lesson.