CSS box-sizing

La propiedad <box-sizing> define cómo calcula el navegador el ancho y alto de un elemento: solo el contenido o incluyendo padding y borde.

Cómo funciona box-sizing

Tiene dos valores principales: <content-box> (por defecto) y <border-box>. En content-box, el ancho y alto aplican solo al contenido, mientras que en border-box incluyen padding y borde.

En el siguiente código, se comparan dos cajas: una con content-box y otra con border-box:

Ejemplos visuales

Los ejemplos muestran que border-box ofrece medidas más predecibles, ya que padding y border se incluyen dentro del tamaño especificado.

Comparación entre content-box y border-box

La diferencia entre content-box y border-box está en qué se incluye en el ancho y alto. Border-box ayuda a que el tamaño total del elemento sea más predecible.

Configuración global de reset

En la práctica, casi siempre conviene establecer border-box en todos los elementos. Para ello, se utiliza una regla de reset CSS.

Uso de box-sizing en layouts

Cuando se colocan varios elementos dentro de un contenedor de ancho fijo, border-box asegura que el padding y el borde no hagan que se desborden.

Consejos para usar box-sizing

El uso correcto de box-sizing facilita la planificación de los layouts. Aquí algunos consejos:

• Se recomienda usar <box-sizing: border-box;> en toda la página.
• Usa un reset CSS para unificar la configuración de box-sizing en todos los elementos.
• Prueba en diferentes navegadores para asegurar consistencia en la apariencia.