Box Model

[00:00:00]
>> Evgenii Ray: So let's start with a very simple concept first. So every HTML element on the page is actually a box, and we can prove this by selecting all the elements on the Frontend Masters website and apply a green border to that. So and as you can see, most of the websites is just a set of rectangles composed together, but the thing about that is the box itself has its own anatomy.

[00:00:30]
The box has four layers, the first one is the content box, so this is the area where we put our text content. And there is a padding box, the area that surrounds the content box. And there is a border box, the area that surrounds the whole content with the padding.

[00:00:47]
And then there is a margin box, this represents the external space, so outside the element border.
>> Evgenii Ray: And we can play around with the example to see that actually we can compose different layers together, so some of them optional.
>> Evgenii Ray: So there could be multiple sets of variations that we can build using these layers.

[00:01:17]
So we started with a very simple box model, but the box itself is not that simple. And it has a two main properties, the one is the box size and the second one is the box type. Let's start with the box size. So box size itself has two types, so it can be intrinsic, so this means that when we don't apply any rules to the box, the height of the box and the size of the box is determined by its content.

[00:01:50]
And it can also be restricted. So it means that, we can apply some fixed size via CSS, or we can also limit the size by the parent. So for instance, if the parent got smaller, the box will adjust its size.
>> Evgenii Ray: And the second property is the box type.

[00:02:14]
So the box itself can be block level, inline level, and I don't even use a box. So let's go for each type.
>> Evgenii Ray: So the block level boxes are rendered like a block, and you may know already most of the text here, but the two main characteristic of the block level box is, it always takes 100% of the height.

[00:02:40]
Sorry, 100% of the width of the parent, and the height of the box is determined by its content size, so intrinsic height. Also two things about the block level boxes is that, the element is rendered from top to bottom. And it also participates in Block's Context Formatting, BCF.

[00:03:00]
Also, there is anonymous box. So the Browser somehow needs to represent the elements that we don't drop into the text. That's why the Browser automatically drops this type of elements into the anonymous box, which is the block level box. And apparently, the block level elements have its own mathematics.

[00:03:22]
So if we try to calculate the width of the box, then there will be two cases. The first one is when the box-sizing is set to the content-box. So we need to calculate the final width of the box, we need to sum all the layers that the box has.

[00:03:42]
If we use the border box-sizing border-box, then the padding and the border already included in the content size. So we don't need to do it manually in JavaScript, and we just need to sum the margins. So this is a very common pattern that we use in the complex apps when we just set the box size in portal box to every element, because it simplifies the calculations.

[00:04:07]
So the next type of element is the inline elements. They're completely different from the block level elements, because they render as a string. So this means that, they are flowing from left to right and from top to bottom. And they also participate in inline formatting context, which is different from the BFC.

[00:04:27]
And they also generate the inline level books, and the inline elements have different mathematics because if you try to apply the width or the height properties to that, they will completely ignore that. And also, they do not react on any vertical margins. And inline paddings also doesn't alter the height of the inline element.

[00:04:51]
So if we look at the example actually, how it works, then the height of the inline element is determined by either the intrinsic height or the line height property. Everything that goes beyond the line height kind of will be ignored by the Browser. So you may open your Browser console and see that there is additional height, but because the Browser ignores every everything that goes beyond the line headline.

[00:05:18]
So everything that goes beyond this line will not be participated in any calculations. So we also call it a non-context height.