CSS Box Sizing
How to work with box sizing in CSS
The default behavior of browsers when calculating the width of an element is to apply the calculated width and height to the content area, without taking any of the padding, border and margin in consideration.
This approach has proven to be quite complicated to work with.
You can change this behavior by setting the box-sizing
property.
The box-sizing
property is a great help. It has 2 values:
border-box
content-box
content-box
is the default, the one we had for ages before box-sizing
became a thing.
border-box
is the new and great thing we are looking for. If you set that on an element:
.my-div {
box-sizing: border-box;
}
width and height calculation include the padding and the border. Only the margin is left out, which is reasonable since in our mind we also typically see that as a separate thing: margin is outside of the box.
This property is a small change but has a big impact. CSS Tricks even declared an international box-sizing awareness day, just saying, and it’s recommended to apply it to every element on the page, out of the box, with this:
*, *:before, *:after {
box-sizing: border-box;
}
→ I wrote 17 books to help you become a better developer, download them all at $0 cost by joining my newsletter
→ JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025