Anatomy UI

Box sizing

The size of elements on the web can be calculated in two ways: using the content box sizing model or the border box sizing model. By default, content box sizing is used to calculate most element’s dimensions, but not all. Table, select, button, and input elements all use border box sizing by default.


Box sizing strategies

Context box sizing adds explicit widths and heights in addition to padding and border width. Therefore, a 100px wide box with 24px of left padding and 24px of right padding will by 148px wide.

Border box sizing on the other hand, calculates padding and border widths within the defined width and height. Therefore, a 100px wide box with 24px of left padding and 24px of right padding will by 100px wide.

24px
24px
24px
24px
Placeholder for an example card.

Book excerpt

Dorothy leaned her chin upon her hand and gazed thoughtfully at the Scarecrow. Its head was a small sack stuffed with straw, with eyes, nose, and mouth painted on it to represent a face.

0px
* {
}
.card {
}

Recommendation

Turn on border box sizing for all elements if possible. Every element’s dimensions will be calculated the same, and explicit calculations will be easier as padding and border width values won’t unintentionally increase the width and height of elements.