Box-sizing

When discussing the height propertyA property that gives the height of the content, with values given as sizes. and the width propertyA property that gives the width of the content, with values given as sizes., 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.

Note:

Hints:

  • undefined
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
<!DOCTYPE html>
<html lang="en">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
p {
    height80px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX