Contenido del curso
Box model en CSS: contenido, padding y margin
El box model en CSS define cómo cada elemento de tu HTML se comporta como una caja con contenido, padding, borde y margin. Entender este modelo te ahorra horas de frustración cuando tus contenedores no respetan las dimensiones que les diste y aprendes a controlar el espacio visual de tu proyecto.
¿Qué es el box model en CSS y por qué importa?
CSS trata absolutamente todos los elementos de tu HTML como cajas rectangulares. Aunque veas un texto suelto o una imagen pequeña, el navegador siempre dibuja un rectángulo invisible alrededor para calcular su tamaño y posición.
Esa caja se compone de cuatro capas que puedes inspeccionar desde las DevTools del navegador. Cada capa cumple una función distinta y se renderiza con un color diferente para ayudarte a visualizarla.
¿Qué es el box model? Es el sistema con el que CSS calcula el tamaño y el espacio de cada elemento. Incluye contenido, padding, borde y margin, y los suma para definir las dimensiones finales en pantalla.
¿Cuáles son las partes del modelo de caja?
Las cuatro capas funcionan de adentro hacia afuera y cada una tiene una responsabilidad clara dentro del diseño.
Contenido, padding y borde: el espacio interno
El contenido es el área donde vive el texto, la imagen o cualquier elemento hijo. Lo ves resaltado en azul cuando inspeccionas un elemento.
El padding es el espacio interno entre el contenido y el borde del contenedor. Se visualiza en verde y le da aire al contenido para que no quede pegado a las orillas. Si lo eliminas, el texto choca directamente contra el borde y pierde legibilidad.
El borde marca el límite visual del contenedor. Aunque a veces lo usas solo para depurar y saber dónde termina tu div, también ocupa píxeles reales que el navegador suma al cálculo del tamaño.
Margin: el espacio externo entre contenedores
El margin es el espacio que existe afuera del contenedor y separa un elemento de otro. Si tienes dos divs pegados y necesitas distancia entre ellos, aplicas margin.
En el ejemplo de la clase se aplica un margin de 20 píxeles en la parte inferior para separar contenedores apilados. Sin ese margin, los elementos se ven encimados y el diseño se vuelve confuso cuando crece el proyecto.
¿Cuál es la diferencia entre padding y margin? El padding es espacio interno entre el contenido y el borde. El margin es espacio externo entre un contenedor y los elementos vecinos.
¿Por qué mi contenedor mide más de lo que definí?
Aquí viene lo interesante. Si le pones a tu div un width de 200 píxeles y al inspeccionarlo descubres que mide 249.33 píxeles, no estás loco: es el comportamiento por defecto de la propiedad box-sizing.
Por default, todos los elementos vienen con el valor content-box. Eso significa que el navegador toma tu width declarado y le suma el padding izquierdo y derecho, más el grosor del borde de ambos lados.
En el ejemplo: 200 píxeles de width + 40 de padding (20 por cada lado) + 10 de borde (5 por lado) = aproximadamente 250 píxeles totales. Tu contenedor terminó más ancho de lo que pediste.
Cómo usar border-box para controlar el tamaño real
La solución es cambiar el box-sizing a border-box. Con este valor, el padding y el borde ya no se suman al ancho declarado: se acomodan dentro de los 200 píxeles que tú definiste.
css
El selector universal * aplica esta regla a todos los elementos del documento. Es una práctica recomendada al iniciar cualquier proyecto porque también ayuda a resetear los estilos por defecto que el navegador inyecta a etiquetas de texto y otros elementos.
¿Por qué usar border-box en lugar de content-box? Porque te da control total del tamaño final. Puedes agregar padding y bordes sin recalcular dimensiones ni romper tu layout.
¿Qué hace el reset de estilos del navegador?
Cada navegador agrega estilos por default a etiquetas como párrafos, listas o títulos. Esos estilos son los que aparecen en el inspector marcados como provenientes del user agent.
Cuando reseteas margin y padding desde tu CSS, garantizas que los espacios que veas en pantalla sean exactamente los que tú definiste. Sin ese reseteo, tus diseños pueden verse diferentes entre Chrome, Firefox o Safari, y rastrear esos píxeles fantasma se vuelve un dolor de cabeza.
La combinación de box-sizing: border-box con un reset de margin y padding al inicio de tu hoja de estilos es la base que te permite construir interfaces predecibles. A partir de ahí, cualquier padding o borde que agregues responde exactamente a lo que ves en tu maqueta.
¿Ya identificaste si tu proyecto actual está usando content-box o border-box? Cuéntame en los comentarios cómo te ha cambiado el flujo de trabajo después de aplicar el reset.
