CSS tiene dos modelos de caja
Son
content-box: content box-content es el
borde del cuadro border-box: border box-the border es el borde del cuadro
Fórmula:
ancho del cuadro de contenido = ancho del contenido ancho
del cuadro de borde = ancho del contenido + relleno + borde
Al observar la figura a continuación, el div establecido en border-box es obviamente mucho más pequeño que el content-box. En general, se recomienda usar border-box, de modo que el ancho y la altura del elemento sean fáciles de calcular durante el diseño.