Skip to main content

Box sizing

Big O

In CSS, the box-sizing property is used to change how the width and height of an element are calculated.

Main values of box-sizing​

content-box (default value)​

The width and height of the element are calculated only for the content. Padding and borders are not included in these dimensions. So, if you add padding or a border, the size of the element increases.

border-box​

The width and height include content, padding, and borders. This means that if you add padding or borders, the size of the content decreases to maintain the overall size of the element.