Box-sizing

When discussing the height property and the width property, we noted that dimensions referred to the content only, not the entire box.

If instead you wish to calculate sizes based on the entire size of the box, you can set the value of the box-sizing property (box-sizing) to the value border-box (instead of the default content-box), which results in the height and width properties applying to the total size of the content, padding, and border.

In this example, the first two paragraphs use content-box, which results in different sizes due to the padding added to the second paragraph. The last two paragraphs use border-box, which results in the same size for both, even though one has padding and the other doesn't.