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;