Skip to content

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:

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;
}

→ Here's my latest YouTube video

→ Get my CSS Handbook

→ 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

Bootcamp 2025

Join the waiting list