Box Sizing

The box sizing property will allow you to change the way in which an elements dimensions are calculated. There are two values that can be used with the box-sizing property: content-box & border-box.

Content Box

The content-box value is the default value for the box-sizing property. This value will only include the content of the element into the height and width values. That is to say that the border and padding of an element will not be represented within its height and width. The total amount of space the element will take up will be different from the value of its stored width and height properties.

Actual Width: ELEMENT WIDTH + PADDING + BORDER

Border Box

The border-box value is the other option for the box-sizing property. This value will include both the padding and the border sizings to the content to total the width and height. This means that the value given for the height and width of an element will accurately describe the amount of space the element actually takes up.

Actual Width: ELEMENT WIDTH

---

Example Playground

You may have noticed the two gray elements on the page. Both of these elements have the exact same properties, with one execption: box-sizing. Using the inputs below, make changes to the elements' heigth, width, padding, and border properties. Each input controls the properties for both boxes, so any differences between them will be a result of how their dimensions are calculated. Notice particularly how padding and border affect each box differently.