Check out a free preview of the full CSS In-Depth, v2 course:
The "Box Sizing" Lesson is part of the full, CSS In-Depth, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Estelle reviews the old IE box model and the standard box model. The "box-sizing: border-box" property value converts elements in modern browsers to the old IE box model, including padding and width within the box size.

Get Unlimited Access Now

Transcript from the "Box Sizing" Lesson

[00:00:01]
>> Estelle Weyl: Okay, another property that we have in CSS, and I've used it several times over the past two days, is box sizing. Originally, the box sizing for all the browsers other than IE was content box, and that is the box model. It basically says we need to clear a width, that's gonna be the width of the content, and if you declare padding it's gonna be bigger.

[00:00:29] And so you would have things that were more than 100% because you declare width of 100%, you put padding on it and all of a sudden it's 120%. So border box, box sizing, border box, basically replicates the old IE model. And says include that padding in that width so that you don't go over that 100%.

[00:00:48] So you saw many times when I want to fix something, I just put box-sizing border-box. I should put a little star, but don't do that cuz then you don't wanna do a global selector and choose any feature, really. Because buttons and inputs and replaced elements will also get whatever you're doing.

[00:01:10] And you want to make sure that's not over kill.