CSS - Tamaño de caja

La propiedad de tamaño de cuadro se usa para cambiar la altura y el ancho del elemento.

Desde css2, la propiedad box ha funcionado como se muestra a continuación:

ancho + relleno + borde = ancho real visible/renderizado del cuadro de un elemento

altura + relleno + borde = altura real visible/renderizada de la caja de un elemento

Significa que cuando establece la altura y el ancho, parece un poco más grande que el tamaño dado, lo que hace que se agregue el borde y el relleno del elemento a la altura y el ancho del elemento.

Propiedad de tamaño de CSS2

La imagen de arriba tiene el mismo ancho y alto de dos elementos, pero el resultado es diferente, porque el segundo está incluido en la propiedad de relleno.

Propiedad de tamaño de cuadro CSS3