If an HTML element is styled using CSS with
width: 100px; padding: 10px, which will be the width of the box rendered on the screen?
The rendered width depends on the value of the
box-sizing property. With its default value,
content-box, the rendered width will be 120 pixels.
With the other possible value for
box-sizing, which is
border-box, the rendered width would be 100 pixels and would include the 10 + 10 pixels of padding (and border, if any).
Some experts recommend applying
box-sizing: border-box to all elements as this makes easier to size elements.