Sizing Boxes (Back to the Future)

Sizing Boxes (Back to the Future) – destroy/dstorey.

I’ve been using box-sizing:border-box; more and more lately as it seems. Especially with the Bootstrap-inspired style guides I’ve been working on for client projects. There are a few times where it just makes sense, and I think once I’m beyond my habitual omission of the property, I’ll begin to use it more and more. I remember struggling with the box model quite a bit as I was learning CSS and I don’t think I was alone. While it ‘makes sense’ to me now, the alternate model is really attractive on the surface.

There’s more to it though, it’s important to know the pros and cons associated with using box-sizing:border-box;, and this article is a great overview of each.