Cálculo del Tamaño de una Caja

calculate

Ejemplo Práctico

code

Código CSS

.caja {
width: 350px;
height: 150px;
padding: 25px;
border: 5px solid black;
}
info

Punto clave

El margen NO se cuenta para el tamaño real de la caja, solo afecta al espacio exterior

Cálculo del Ancho

410px =
350 (width) + 25 (padding-left) + 25 (padding-right)
+ 5 (border-left) + 5 (border-right)

Cálculo del Alto

210px =
150 (height) + 25 (padding-top) + 25 (padding-bottom)
+ 5 (border-top) + 5 (border-bottom)