📦 Modelo de Caja CSS (Box Model)

📌 Explicación teórica:

El modelo de caja define cómo se estructuran los elementos en una página web.

Componentes principales:

Content (contenido): El área donde se muestra el texto o imágenes.
Padding (relleno): Espacio interno entre el contenido y el borde.
Border (borde): Línea que rodea el padding y el contenido.
Margin (margen): Espacio externo que separa el elemento de otros.

📌 Demostración visual:

Hola, soy un párrafo

caja

🧮 Cálculo del tamaño total:

Ancho total = width + padding-left + padding-right + border-left + border-right

200px + 20px + 20px + 2px + 2px = 244px

Alto total = height + padding-top + padding-bottom + border-top + border-bottom

100px + 20px + 20px + 2px + 2px = 144px

Nota: El margin (30px) no se incluye en el tamaño total del elemento, pero sí afecta el espacio que ocupa en la página.

💡 Propiedades CSS utilizadas:

width: 200px - Ancho del contenido
height: 100px - Alto del contenido
padding: 20px - Relleno interno (20px en todos los lados)
border: 2px solid black - Borde de 2px sólido negro
margin: 30px - Margen externo (30px en todos los lados)