[Duda] Problema con la visual del primer producto | HTML5 y CSS3 parte 2: Posicionamiento, listas y navegación | Alura Latam

Hola! Sucede que el primero de mis productos, que es la barba, tiene un problema en la visual: se ve más grande verticalmente que las otras dos, lo sé porque el borde gris es más grande, esto porque su descripción ocupa dos renglones en vez de uno solo, como el resto de los productos. No sé qué ajuste hacerle a mi código para que esto cambie. Aquí dejo la imagen: Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

Y acá, mi código:

<!DOCTYPE html>
<html>
         <head>
            <meta charset="UTF-8">
            <title>  Productos - Barbería Alura
            </title>

            <link rel="stylesheet" href="pruductos.css"> 

         </head>
 <body>
        <header>
            <div class="caja">
                    <h1>  <img src="imagenes/logo.png" alt="Logo Barbería Alura">  </h1>
                <ul>
                    <nav>
                        <li><a href="HTML1/index.html">Home</a></li>
                        <li><a href="productos.html">Productos</a></li>
                        <li><a href="http://www.elespectador.com">Contacto</a></li>
                     </nav>


                 </ul>
          </div>

        </header>

        <main>
            <ul class="productos">
                <li>
                    <h2>Cabello</h2>
                    <img src="imagenes/cabello.jpg">
                    <p class="producto-descri">Con tijera o máquina, a gusto del cliente</p>
                    <p class="producto-precio">$10.00</p>
                    </li>
                <li>
                    <h2>Barba</h2>
                    <img src="imagenes/barba.jpg">
                    <p class="producto-descri">Corte y diseño profesional de barba</p>
                    <p class="producto-precio">$8.00</p></li>
                <li>
                    <h2>Cabello más barba</h2>
                    <img src="imagenes/cabello+barba.jpg"> 
                    <p class="producto-descri">Paquete completo de cabello y barba!!</p>
                    <p class="producto-precio">$15.00</p>
                    </li>
            </ul>



        </main>

    </body>



</html>

La parte del CSS:

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

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

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

nav li{
    display: inline;
    margin: 0 0 0 100;
}

nav a {
    text-transform: uppercase;
    color: #000000;
    font-weight: bold;
    font-size: 22px;
    text-decoration: none;
}

.productos{
    width: 940 px;
    margin: 0 auto;
    padding: 50px;
}

.productos li{
    display: inline-block;
    text-align: center;
    width: 30%;
    vertical-align: top;
    background: #CCCCCC;
    margin: 0 1.5%;
    padding: 30px 20px;
    box-sizing: border-box;
}

.productos h2{
    font-size: 30 px;
    font-weight: bold;
}

.producto-descri{
    font-size: 18px;
}

.producto-precio{
    font-size: 20px;
    font-weight: bold;
    margin-top: 10px;
}

Hola Alumno, espero que estés bien.

Esto se da porque en el abordaje de los elementos de tu página se está agregando el valor de padding en el tamaño del elemento y el texto del primer producto cayo a una segunda línea y generó este aumento de tamaño.

Una solución seria usar el siguiente código CSS en el principio de tu archivo css:

.body {
    box-model: border-box;
}

box-sizing: border-box es una propiedad de CSS que cambia la forma en que se calcula el tamaño de un elemento, teniendo en cuenta el borde y el relleno (padding) en lugar de agregarlos al tamaño total del elemento. Cuando se establece en border-box, el tamaño total del elemento se define como el ancho y alto especificados, incluyendo cualquier borde y relleno.

Por ejemplo, si tienes un div con un ancho de 200px y un relleno (padding) de 20px, y se establece el box-sizing en border-box, entonces el ancho total del div será de 200px, y el contenido se ajustará dentro de ese tamaño. Si no se establece el box-sizing en border-box, el ancho total del div sería de 240px (200px + 20px a la izquierda y 20px a la derecha).

Es útil establecer el box-sizing en border-box para que el diseño sea más predecible y fácil de manejar, especialmente cuando se trabaja con elementos que tienen bordes y relleno.

Si tienes alguna duda, no dejes de preguntar. ¡Estamos aquí para ayudarte!.

¡Saludos!

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