The Box Model

[00:00:00]
>> So, we will begin building the home, the rest of the homepage here. But before we do that, there are a few concepts that we need to be aware of. So, the first is the box model, and if you've heard of CSS, you may have heard of the box model before.

[00:00:19]
So, we go back to this concept of block elements versus inline elements. So, again, block breaks onto a new line. We've got padding margin and border separating it from other elements on the page. And when there is no explicit width set on the element, it's gonna take up the whole width.

[00:00:38]
Inline elements, again, they sit in line, they don't cause other elements to break onto new lines. But only left and right padding, and margin, and border are gonna move elements away from it. It's not gonna respect top and bottom for padding, margin, and border. We'll see what that means in a minute.

[00:00:57]
And then, we set inline block on our nav items. So we can set this on an element if we don't want it to break onto a new line, but we do want to be able to set padding, margin, and border. So this is what the box model looks like in practicality.

[00:01:12]
And if you were following along when I was inspecting things you can see at the bottom of the Chrome Dev inspector, we've got a box model to picked it here shows you margin, border, padding, and content So, content is the area where our content is displayed. Padding is whitespace that wraps the content.

[00:01:38]
Border wraps the content and padding. And then, margin is gonna wrap content, border, and padding. Now, here's where things get a little spicy. We've got a standard box model. So, in the standard box model, we actually can define the width and height of the content box. So, it's that inner box that holds our content.

[00:02:00]
And on top of that, padding and border are added to those dimensions to get the total size. So, what does that look like? If we've got a box, and we set a width and height of 200 pixels by 80 pixels, that defines the content area within height. So, our content box is 200 pixels width, 80 pixels height.

[00:02:22]
We've also defined padding and border. So, 20 pixels of padding on all four sides, 10 pixels of border on all four sides. So, the actual width and height of our box when it's being calculated is not 200 by 80. The width is 200 pixels for the content box, plus 20 pixels of left and right padding, and 10 pixels on left and right for border.

[00:02:52]
The height is the same. We've defined a height of 80 pixels for the content box, and on top of that, we've got a cumulative 40 pixels for padding, and a cumulative 20 pixels of border. So, the actual dimensions of this, with the standard box model, are not 200 by 80, it's 260 by 140.

[00:03:12]
This is where you might see something called box-sizing border-box. This is the alternative box model, so the size is the content area width minus padding and border, so it will not be any larger than what you've defined. So here, we set width and height to 200 by 80 again, but because we have padding and border also defined.

[00:03:33]
We've set box sizing to border box, so we're saying we want this width to be no larger than 200 pixels, regardless of padding, or border, or content width. And we want the height to be no higher than 80. So, to calculate the actual width and height of the content box, you need to take that defined width, subtract out the padding, and subtract out the border.

[00:03:58]
So, the actual width and height of the content box is gonna be 140 by 20. Versus here, it was the actual 200 by 80. It was just a quick explanation of what box sizing border box does, but it is quite interesting, and it's easier to set explicit width and height of elements if you really need them to stay within boundaries.