Ejercicio: La caja y el flujo del documento

Objetivo

Construir una tarjeta de producto aplicando el modelo de caja: box-sizing, márgenes, relleno, bordes, display, overflow y proporciones.

La página de partida

Este es el HTML de tu página. No lo modifiques: escribe solo el CSS.

<div class="pagina">
  <header class="cabecera"><h1>Tienda de plantas</h1></header>
  <section class="tarjeta">
    <img class="foto" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300'%3E%3Crect width='400' height='300' fill='%234f46e5'/%3E%3C/svg%3E" alt="Imagen de ejemplo">
    <h2 class="titulo">Monstera</h2>
    <p class="texto">Una planta de interior fácil de cuidar, con hojas grandes y muy decorativas.</p>
    <span class="etiqueta">Interior</span>
    <span class="etiqueta">Fácil</span>
    <a class="boton" href="#">Comprar</a>
  </section>
</div>

Pasos

Marca cada paso a medida que lo completes. Tu avance se guarda en este navegador.

• Escribe *, *::before, *::after { box-sizing: border-box; } y body { margin: 0; font-family: system-ui, sans-serif; }.
• Haz que .pagina tenga max-width: 640px y esté centrada (margin: 0 auto) con padding: 24px.
• Haz que .tarjeta tenga borde 1px solid #dde2ef, border-radius: 16px, padding: 20px y overflow: hidden.
• Haz que .foto ocupe 100% de ancho con aspect-ratio: 16 / 9 y object-fit: cover.
• Haz que .etiqueta sea inline-block con padding: 2px 10px, border-radius: 999px, fondo #eef2ff y margin-right: 6px.
• Haz que .boton sea inline-block con padding: 10px 20px, fondo #4f46e5, texto blanco, border-radius: 10px y sin subrayado.
• Separa el título y el texto con margin para que .titulo tenga margin: 16px 0 8px y .texto margin: 0 0 16px.

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; }

.pagina {
  max-width: 640px;
  margin: 0 auto;
  padding: 24px;
}

.tarjeta {
  border: 1px solid #dde2ef;
  border-radius: 16px;
  padding: 20px;
  overflow: hidden;
}

.foto {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.titulo { margin: 16px 0 8px; }
.texto  { margin: 0 0 16px; }

.etiqueta {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: #eef2ff;
  margin-right: 6px;
}

.boton {
  display: inline-block;
  padding: 10px 20px;
  background: #4f46e5;
  color: #fff;
  border-radius: 10px;
  text-decoration: none;
}