Curso de CSS
Dale estilo y vida a la web.
Aprende CSS con ejemplos interactivos y crea proyectos reales.
Por defecto, el ancho que defines no incluye el padding ni el borde. box-sizing: border-box resuelve este problema de raíz.
Explicación
box-sizing decide si el padding y el borde se suman o no al ancho que definiste:
box-sizing: content-boxValor por defecto: width solo define el contenido; padding y border se suman aparte, agrandando la caja final.
box-sizing: border-boxwidth incluye padding y border dentro de esa medida; la caja final mide exactamente lo que definiste.
* { box-sizing: border-box; }Patrón muy común: aplicar border-box a todos los elementos al inicio de un proyecto para tamaños más predecibles.
Reto rápido
Agrega * { box-sizing: border-box; } al inicio del CSS y observa si cambia el tamaño de ambas cajas.
En esta lección
- Ejemplo interactivo
- Explicación de cada etiqueta
- Cuándo usarlo
- Errores comunes
Consejo
La mayoría de los proyectos profesionales agregan "* { box-sizing: border-box; }" al inicio de su CSS. Ahorra muchos dolores de cabeza calculando tamaños.
Dato extra
Antes de que border-box fuera tan popular, calcular tamaños exactos con padding y bordes era una de las mayores frustraciones al aprender CSS.
Error común
Definir width: 100% en un elemento con padding y sin border-box: el elemento termina siendo más ancho que su contenedor y provoca scroll horizontal inesperado.
Siguiente paso
Ya dominas el tamaño de las cajas. Ahora aprende a sacarlas de su flujo normal con position.
Ir a la siguiente lección