Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Solucionado (ver solución)
Solucionado
(ver solución)
1
respuesta

[Duda] Duda de box-sizing

hola amigos, buenas noches; queria saber si porfavor me prodrian ayudar en una cuestion, al parecer al usar el box-sizing no me coinciden los rectangulos: Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidadHTML:

<body>
    <header>
        <div class="bloque">
            <h1><img src="imagenes/logo.png"></h1>
                <nav>
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href=Productos.html>Productos</a></li>
                        <li><a href="Contacto.html">Contacto</a></li>
                    </ul>
                </nav> 
        </div>
    </header>
        <main>
        <ul class="productos">
            <li> 
                <h2>cabello</h2>
                <img src="imagenes/cabello.jpg">
                <p class="producto-descripcion">Con tijera o maquina, 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-descripcion">Corte y diseño de barba.</p>
                <p class="producto-precio">$08.00</p>

            </li>
            <li>  
                <h2>cabello+barba</h2>
                <img src="imagenes/cabello+barba.jpg">
                <p class="producto-descripcion">Paquete de cabello y barba.</p>
                <p class="producto-precio">$15.00</p>
            </li>
        </ul>
    </main>
</body>
CSS: header{ background-color: #bbbbbb; padding: 20px 0; } .bloque{ width: 940px; position: relative; margin: 0 auto; } nav li{ display: inline; margin: 0 0 0 15px; } nav a{ text-transform: uppercase; color: #000; font-weight: bold; font-size: 22px; text-decoration: none; } nav{ position: absolute; top: 110px; right: 0px; } .productos{ width: 940px; 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-color: #000000; border-width: 2px; border-style: solid; } .productos h2{ font-size: 30px; font-weight: bold; } .producto-descripcion{ font-size: 20px; } .producto-precio{ font-size: 20px; font-weight: bold; margin-top: 10px; }
1 respuesta
solución!

Hola, por absurdo que suene en comparación de lo que tienes a lo que el instructor tiene solamente es la descripción del producto. Al parecer como el texto que tienes cabe en una sola línea, le faltaría un "salto de línea" podríamos decir para que el contenido sea igual.

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

Lo que puedes hacer si no quieres cambiar el texto, puedes modificar la clase ".producto-descripcion" del css y añadir la opción de height, con un valor de 50px puede bastar.

Espero que te pueda ser de ayuda, saludos :)