[Duda] por que sale la imagen de la mitad mas corta? | HTML5 y CSS3 parte 2: Posicionamiento, listas y navegación | Alura Latam

header { background-color: #BBBBBB; padding: 20px 0; }

.caja{ width: 940px; position: relative; margin: 0 auto; }

nav{ position: absolute; top:110px; right: 0; }

nav li{ display: inline; margin: 0 0 0 15px; }

nav a{ text-transform: uppercase; color: #000000; font-weight: bold; font-size: 22px; text-decoration: none; } .productos{ width: 940px; position: relative; margin: 0 auto; padding: 50px; } .productos li { display: inline-block; text-align: center; width: 30%; vertical-align: top; margin: 0 1.5%; padding: 30px 20px; box-sizing: border-box; border: 2px solid #000000; border-radius: 10px; } .productos h2{ font-size: 30px; font-weight: bold; } .producto-descripción{ font-size:18px; } .prodcuto-precio{ font-size: 20px; font-weight: bold; margin-top: 10px; }

asi tengo mi archivo css, me pueden ayudar a identificar por que se ve de la siguiente forma la pagina asi se ve la pagina

¡Hola Sebastián!

Por lo que puedo ver en la imagen que compartiste, el problema parece estar en la altura de las imágenes de los productos. Algunas imágenes se ven más cortas que otras, lo que hace que la altura de las cajas de productos no sea uniforme.

Para solucionar esto, puedes agregar un alto fijo a las imágenes en tu CSS. Por ejemplo, si quieres que todas las imágenes tengan una altura de 200 píxeles, puedes agregar la siguiente regla:

.productos img {
  height: 200px;
}

Ajusta el valor de "height" según lo que necesites para que todas las imágenes tengan la misma altura y las cajas de productos se vean uniformes.

Espero que esto te ayude a solucionar tu problema. ¡Buenos estudios!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios! :)