Instructor: The CSS box model is the foundation of layout on the web. Each element is represented as a rectangular box with the box's content, padding, border, and margin built up around one another. As HTML is structured on the page, the browser will take this layering into effect when trying to piece together an overall layout.
When we hover over our div here with a class of box, we see that it's 100x100. If we were to give it padding of 10 pixels and refresh, our box model accounts for this padding and now our width and height is 120x120. If we give this box a border of 10 pixels, solid and green, go ahead and refresh, our box gets even bigger now as it accounts for border and it's 140x140.
If we add margin to this box at 10 pixels and refresh, we see that now we have margin on our box but it's not actually affecting the size of our box. It's still 140x140.
This is because margin acts a little bit differently. It surrounds a CSS box and pushes up against other CSS boxes around it in the layout, but it doesn't add to the height and width.
If we wanted our browser to take into effect the height and width that we've given it and not add on padding and border to the height and width, we can do box sizing, border box. This will tell it to not add in border and padding to the overall height and width, so we're back to 100x100. The default styling is not border box, but content box.
There is one caveat however. Everything that we've seen so far with the box model only applies to block-level elements. If we were to add display inline here to our box we could see that height and width are going to be ignored.