🤔 ¿Qué es el Box Model?

Box Model (modelo de bloque) es la forma en que el navegador representa y calcula cada elemento de la página. Cualquier elemento HTML, ya sea <div>, <p>, <button>, el navegador lo percibe como caja rectangular.

Y esta caja tiene una estructura:

• Content — contenido (texto, imagen, etc.)

• Padding — sangría interna desde el contenido hasta el marco

• Border — marco alrededor del elemento

• Margin — sangría externa a los elementos adyacentes

🔍 ¿Por qué es importante?

Puedes saber HTML y CSS a la perfección, pero si no entiendes cómo se calcula el tamaño del bloque, entonces constantemente te harás preguntas como:

• «¿Por qué el bloque va más allá de los límites del padre?»

• «¿Por qué margin no funciona como esperaba?»

• «¿Por qué se han fusionado dos bloques en uno?»

Y casi siempre la respuesta está en el modelo de caja.

📏 Fórmula de cálculo de tamaño

Ejemplo:

width: 200px;
padding: 10px;
border: 2px solid black;
margin: 20px;

Si se utiliza box-sizing: content-box:

Ancho final = 200 + 10 + 10 + 2 + 2 = 224px

Si se utiliza box-sizing: border-box:

El ancho incluye el relleno y el borde → contenido = 176 px

🧠 ¿Cómo dibuja el navegador un bloque?

1. Análisis de HTML

2. Aplica CSS

3. Crea un árbol de renderización

4. Calcula las dimensiones de todos los elementos a través de Box Model

5. Dibuja todo en la pantalla

🚫 Errores y mitos frecuentes

🔹 Margin collapse

Las sangrías verticales de los bloques vecinos no se suman, sino que se fusionan: se mantiene la más grande.

🔹 Los elementos se salen del contenedor

Si se especifica width: 100% y se añade padding, el bloque puede sobresalir. Solución: box-sizing: border-box.

🔹 El borde afecta al tamaño

Incluso el marco de 1px cambia de tamaño. Usa box-sizing o outline para el cursor.

🎨 ¿Cómo se ve en el navegador?

1. Abrir DevTools (F12)

2. Seleccionar elemento

3. En la pestaña Computed, visualización de Box Model

🧪 Consejos prácticos

• Añadir globalmente: * { box-sizing: border-box; }

• Seguimiento de los márgenes en contenedores de cuadrícula/flexibles

• En lugar de border para el enfoque, puedes usar outline

💻 ¿Por qué es importante para ti, desarrollador?

Box Model es el control sobre el diseño. No solo estableces el ancho y la altura, sino que controlas el comportamiento de la interfaz. La perfección de píxeles comienza con el modelo de caja.

📱 ¿Quieres profundizar en el front-end?

Descargar Kodik — una aplicación con cursos paso a paso sobre front-end, donde todo se explica en ruso y con palabras sencillas. Aprende, practica, diseña con confianza.

🎯 Conclusión

Box Model es la base. Si lo dominas, el diseño se volverá estable. Si no lo dominas, lucharás con los retrocesos toda tu vida.

👇 ¿Usas box-sizing: border-box por defecto? Escribe en los comentarios cómo te encontraste por primera vez con el modelo de caja y cómo todo encajó en su lugar.