Width and height calculations

box-sizing

This property defines whether or not the element's border and padding should be considered as part of the element's width and height.

Property values

Specify one of these values:

keyword width calculation height calculation
content-box The width of the element is equal to the width property plus border-left-widthplus border-right-width plus padding-left plus padding-right.The height of the element is equal to the height property plus border-top-widthplus border-bottom-width plus padding-top plus padding-bottom.
border-box The width of the element is equal to the width property and any border or padding is taken away from that value making the final width of the content area smaller. The height of the element is equal to the height property and any border or padding is taken away from that value making the height of the final content area smaller.

Examples

box-sizing: border-box;
box-sizing

style > whitespace > box-sizingWidth and height calculations

🔎