Box Sizing

[00:00:00]
>> Kevin Powell: When we're talking about the sizing of things, one thing we have to talk about is box sizing. So box sizing deals with how big boxes actually are on the page and how the browser renders the size of an element. And you'll notice here I've used percentages, we haven't talked about it. I generally don't use widths as percentages very often. It was something in the old days that we had to do very often, but these days we don't need to do.

[00:00:23]
But I've set an inline size of 100% on this paragraph, and it's spilling out the side of the parent. The parent here has a size of 100 pixels, if I make it 200 pixels, it's still spilling out the side of it. And the reason this is happening is because this 100% is the size of the content-box. Then I've added a border and I've added padding. So I've actually made it 100% plus 20 on both sides, plus 20 again on both sides, meaning this is now bigger than what the parent of it was, which is kind of annoying.

[00:00:56]
You'd expect this, if I'm saying it's 100%, I'd expect it to be 100% and not 100% plus 20 plus 20. So the common solution here is to come and say that the box sizing, again, the default here is content-box, you don't have to declare that. It won't change anything, but the very common thing you'll see is to come here and say this is my border-box. And when I do that, it fixes the problem. The reason this is fixing it is, let's go look at our dev tools again.

[00:01:29]
Pull up the computed tab, we're now saying that the size of the box, so here we're declaring a size, when we declare a size, this size isn't just the content-box anymore, that size is all the way out to this part. So it includes the size of the border, and the size of the padding, and the size of the content, all to figure out what this number should be. And it will not include the margin. Margin is always something that's added on top, there's no way, there's no margin box or anything like that.

[00:01:59]
The only option we have is border-box or content-box, and it's one of those things, especially for a long time that we needed everywhere, just because it made life a lot easier, it still does. So, you'll see this declaration is probably one of the most common ones out on the web at the start of every single project. It's one of the times where I'll say it's okay to use the star selector, our universal selector, because we want every element to have it, and this is not an inherited property.

[00:02:29]
So there's no way to declare this on the body, it's layout related, so it gets stuck there if you just do it on the body. So, doing something like this is a very common practice. I mentioned in this lesson, if you're reading the content, that I have moved away from necessarily saying that we have to do this on every single project. I'm in the middle of trying to decide just because we declare widths on things much less often than we used to.

[00:02:56]
At one point it was very common. Everything had to have a width. We had floats and other ways of doing layouts. It was terrible. These days it's much less common, and there's times where maybe you want the content-box because the thing isn't being calculated the right way when you use the border-box. I'd say you probably want to use this because it's just so universally used by everybody that it's probably go for it, but just know that there is an alternative.

[00:03:20]
If ever your box is the wrong size, just go, Kevin, I know there's an alternative. It doesn't even have to be, you don't remember why. There's a way that I can resize this box to get it to work a little bit differently. Look that up like box size CSS, you'll find the box sizing and then find content-box as the potential fallback or not fallback, but alternative that you could use. But in the case of our project, this actually does help us out because if we look here at the size of our elements.

[00:03:48]
Actually, I think these, let's put a bit more padding on this, and we might see it. I think I messed up my padding along the way. So that's our hero content. Oh, I changed it to padding block. That's why. If we add padding on all the sides, the alignment here is off. Because I said 900 pixels, it's doing 900 pixels, plus it's adding that 50 pixels on each side here. So it looks like the alignment of our layout is a little bit broken.

[00:04:15]
So to fix that, bring him all the way to the top of our document. Before the body, it doesn't have to go here, but again, just having general selectors early on is a nice habit to have, and we can say box sizing of border-box. And now if I go take a look, the alignment all starts lining up together. Looks like it's a little bit off actually. I'm curious now. 900. Oh, it's because I have padding on this one as well.

[00:04:43]
We're going to fix that in a minute anyway, but it's closer than what it was, and when we come in with the next solution, it'll get a bit more consistency across the entire board. But it is definitely a very common declaration, you're going to see it in anywhere you go that has existing code, you'll probably see that declaration, so now you know why.