✨ Definición: El Modelo de Caja es el concepto fundamental de CSS que describe cómo se representa cada elemento HTML como una "caja" rectangular. Esta caja está compuesta por cuatro capas concéntricas que, de adentro hacia afuera, son: CONTENIDO → RELLENO (PADDING) → BORDE (BORDER) → MARGEN (MARGIN). La suma de todas estas capas determina el espacio total que ocupa un elemento en la página.
📄 CONTENIDO (Content)
Área donde se muestra el texto o imágenes. Sus dimensiones se definen con width y height.
📏 RELLENO (Padding)
Espacio interno entre el contenido y el borde. Aumenta el área interior sin afectar el exterior.
🖼️ BORDE (Border)
Línea que rodea el padding y el contenido. Puede tener grosor, estilo (sólido, punteado) y color.
⬜ MARGEN (Margin)
Espacio externo que separa esta caja de otros elementos. Es transparente y no forma parte del tamaño visible.
.mi-caja {
width: 200px; /* Contenido */
padding: 20px; /* Relleno interno */
border: 5px solid #333; /* Borde */
margin: 15px; /* Margen externo */
}
💡 El ancho TOTAL real sería: 200px (content) + 40px (padding izq+der) + 10px (border izq+der) =
250px
(sin contar margin, que es espacio externo)
