Funcionamiento del Modelo de Cajas Estándar

view_quilt

Box Model Estándar

Cálculo de tamaño

Cuando defines width y height, estás estableciendo el tamaño del contenido solamente.

add_circle

Padding y Border se suman

Se añaden al width/height del contenido

calculate

Tamaño total del elemento

Mayor que el tamaño declarado

📦

Contenido

width × height

Padding
Border
functions

Fórmula de cálculo

Ancho total =
width + padding-left + padding-right + border-left + border-right
Alto total =
height + padding-top + padding-bottom + border-top + border-bottom