Ejercicio CSS 02: Box Model y Centrado de Imagen

🎯 Ejercicio: Box Model y Centrado de Imagen

📋 Objetivo

Crear un marco centrado para una imagen aplicando todas las propiedades del Box Model: contenido (imagen), padding, border, margin, outline y tamaño. Aprenderás a centrar elementos y controlar el espacio alrededor de una imagen.

📝 Instrucciones

Copia la plantilla HTML que se proporciona abajo
Crea un archivo CSS externo llamado marco-imagen.css
Aplica las siguientes propiedades del Box Model:

Contenido: Ajusta el tamaño de la imagen con width y height
Padding: Añade espacio interno alrededor de la imagen
Border: Crea un borde decorativo para el marco
Margin: Centra el marco en la página
Outline: Añade un contorno exterior (opcional)
Background: Colorea el fondo del marco

Experimenta con diferentes valores para crear un marco atractivo
¡Sé creativo! Usa tus colores y estilos favoritos

💡 Recordatorio del Box Model

Content: width, height - Tamaño del contenido
Padding: padding - Espacio interno transparente
Border: border - Línea visible alrededor del padding
Margin: margin - Espacio externo que separa elementos
Outline: outline - Línea externa que no ocupa espacio
Centrado: margin: 0 auto - Centra elementos horizontalmente

📄 Plantilla HTML

Copia este código y guárdalo como ejercicio02.html:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ejercicio 02 - Marco de Imagen</title>
  <link rel="stylesheet" href="marco-imagen.css">
</head>
<body>
  <h1>Mi Galería de Fotos</h1>
  
  <div class="contenedor-principal">
    
    <div class="marco-imagen">
      <img src="tu-imagen.jpg" alt="Descripción de tu imagen" class="imagen-principal">
      <p class="pie-foto">Descripción de la imagen</p>
    </div>
    
    <div class="marco-imagen">
      <img src="segunda-imagen.jpg" alt="Segunda imagen" class="imagen-principal">
      <p class="pie-foto">Segunda imagen genial</p>
    </div>
    
    <div class="marco-imagen">
      <img src="tercera-imagen.jpg" alt="Tercera imagen" class="imagen-principal">
      <p class="pie-foto">Tercera imagen increíble</p>
    </div>
    
  </div>
</body>
</html>