Box-Sizing: Content-Box frente a Border-Box
Comprenda cómo box-sizing modifica el cálculo de width y height al incluir padding y border.
Box-Sizing: Content-Box frente a Border-Box es una lección gratuita de CSS Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de CSS Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de CSS Academy incluye 4 lecciones en total.
El problema de box-sizing
De forma predeterminada, CSS establece width únicamente en el área de contenido. Añadir relleno o borde aumenta el tamaño real representado del elemento, lo que resulta confuso y propenso a errores.
<div class="box">200px + padding + border = 244px rendered</div>
content-box (predeterminado)
box-sizing: content-box es el valor predeterminado. width y height se aplican solo al contenido. El padding y el borde se suman, haciendo que el elemento supere el tamaño establecido.
border-box
Con box-sizing: border-box, width y height incluyen contenido + padding + borde. El elemento mantiene exactamente el tamaño declarado, independientemente del padding o del borde.
<div class="box">Exactly 200px rendered width</div>
El restablecimiento universal de border-box
Aplique border-box globalmente mediante el restablecimiento universal recomendado:
<div class="demo-box">Width stays exactly 200px</div>
Por qué usar inherit en lugar de *
Un patrón alternativo permite que los componentes sobrescriban box-sizing cuando sea necesario:
<div class="demo-box">Inherited border-box sizing</div>
Ancho porcentual + padding
El principal beneficio práctico de border-box se aprecia con los anchos porcentuales. Un elemento con width: 50% y 20px de padding mantiene exactamente el 50 % del ancho de su elemento padre sin desbordarse.
<div class="col">50% wide column with padding, no overflow</div>
border-box no incluye margin
Incluso con border-box, margin no se incluye en el ancho declarado. Los márgenes siempre añaden espacio fuera del elemento, además de sus dimensiones establecidas.
Historia: ¿por qué content-box es el valor predeterminado?
Históricamente, los navegadores no coincidían en el modelo de cajas. El W3C estandarizó content-box, pero IE utilizaba border-box. El CSS moderno usa content-box de forma predeterminada para cumplir con el W3C, pero prácticamente todos los proyectos lo sobrescriben con border-box.
Inspección del modelo de cajas en DevTools
En Chrome DevTools, el panel Elements muestra un diagrama del modelo de cajas con las dimensiones exactas del contenido, el padding, el borde y el margen. Es la forma más rápida de depurar problemas de dimensionamiento.
Grid y Flexbox usan border-box internamente
CSS Grid y Flexbox siempre dimensionan las pistas y los elementos mediante la semántica de border-box, independientemente del valor de box-sizing del propio elemento. Esto mantiene predecibles los cálculos de dimensionamiento.
min/max con border-box
min-width, max-width, min-height y max-height funcionan igual que width: incluyen el padding y el borde cuando border-box está activo.
Comprobación rápida
Con box-sizing: border-box, un elemento declarado como width: 300px; padding: 30px; tiene un ancho del área de contenido de:
Resumen
box-sizing: border-box incluye el padding y el borde en el ancho declarado, lo que evita un crecimiento inesperado del tamaño. Aplíquelo globalmente con *, *::before, *::after { box-sizing: border-box }. Los márgenes nunca se incluyen en ninguno de los dos modelos de cajas.
Preguntas frecuentes
¿La lección «Box-Sizing: Content-Box frente a Border-Box» es gratis?
Sí — el texto completo de «Box-Sizing: Content-Box frente a Border-Box» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de CSS Academy, actualiza a CoddyKit PRO. El curso de CSS Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Box-Sizing: Content-Box frente a Border-Box»?
Comprenda cómo box-sizing modifica el cálculo de width y height al incluir padding y border. Practicas CSS Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar CSS Academy?
No se requiere experiencia previa. CSS Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.
¿Cuánto tiempo toma la lección «Box-Sizing: Content-Box frente a Border-Box»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de CSS Academy?
Sí. Cada lección de CSS Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Comprender width, height, margin y padding
- Estilos, ancho y color de bordes
- Box-Sizing: Content-Box frente a Border-Box
- Outline y Box-Shadow