Angel Daniel Almanza Trejo
PreguntaEn la parte que le da un margen de 10px ¿Porqué al inspeccionar no lo veo pero marca un padding en vez del margin?
Angel Daniel Almanza Trejo
Oh vale, ahora si me quedo clarísimo de verdad muchas gracias:3 Si había visto eso del selector universal en el curso de HTML y CSS pero no se me paso por la cabeza que fuera eso, como estaba siguiendo los pasos del curso, también por ello en los selectores vez que llamo mas cosas.
Pero enserio muchísimas gracias:3
Julián Ramírez
No veo nada extraño en el código pero te recomendaría llamar solamente a la clase a menos que sea necesario llamar a la etiqueta HTML y después la clase. Por otro lado el "error" es que no aplicaste (no sé si ya lo viste en alguna clase) estos estilos al iniciar el CSS:
Pusiste margin:0; y padding:0; sobre el body y no con el selector universal lo que hizo que los estilos para ul se aplicaran (lo que no pasa usando este selector que mencioné).
Por último se pone también la propiedad box-sizing con el valor border-box lo cual le dice al navegador lo siguiente: "toma en cuenta para cualquier valor que se especifique de borde o de relleno para el ancho o alto de un elemento".
¿Esto qué significa? Que si tu defines el ancho de un elemento no vas a aumentarlo nunca con el padding, margin o border. Cosa que sí pasaría con el valor por defecto de box-sizing que es content-box. Ahora sí espero haberte ayudado y corregido mi error :D.
Angel Daniel Almanza Trejo
Aun no reviso el código para intentar solucionarlo, pero si me di cuenta que en la clase también se muestra este padding del que te hablo. Aquí el HTML
<!DOCTYPE HTML> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Google Clone</title> <link rel="stylesheet" href="./styles/style.css"> </head> <body> <header> <nav> <ul class="nav-rigth-section"> <li> <a href="">Gmail</a> </li> <li> <a href="">Imágenes</a> </li> <li class="menu-icon"> <a href=""></a> </li> <li> <a href=""><img src="https://lh3.googleusercontent.com/ogw/ADGmqu-ss4pndo85KF8oYp3rPRJXMv9Iq9hF4X5NEpB-nA=s32-c-mo" alt="Imágen de perfil"></a> </li> </ul> </nav> </header> <main> <section class="main-logo"> <img src="./styles/images/google-logo.png" alt=""> </section> <section class="main-input"> <div class="main-input-container"> <span class="search-icon"> </span> <input type="text"> <a class="micro-icon" href=""></a> </div> </section> <section class="main-buttons"> <div> <button>Buscar con Google</button> </div> <div> <button>Me siento con suerte</button> </div> </section> </main> </body> </html>
Aquí el CSS
body{ margin: 0; padding: 0; font-size: 13px; font-family: Arial, Helvetica, sans-serif; } a{ text-decoration: none; cursor: pointer; } header{ width: 100%; height: 60px; } header nav{ display: flex; justify-content: flex-end; } header nav .nav-rigth-section{ width: 250px; height: auto; display: flex; list-style: none; justify-content: center; align-items: center; } nav .nav-rigth-section a { margin-right: 10px; color: #000000; } nav .nav-rigth-section .menu-icon{ background-image: url('https://static.thenounproject.com/png/3095017-200.png'); background-repeat: no-repeat; background-position: center; background-size: contain; width: 25px; height: 25px; } nav .nav-rigth-section img{ border-radius: 50%; margin-left: 10px; } main{ margin-top: 80px; text-align: center; } main .main-logo{ width: 530px; margin: 0 auto; margin-bottom: 35px; } main .main-logo img{ width: 300px; } main .main-input{ width: 530px; margin: 0 auto; margin-bottom: 35px; } main .main-input-container{ width: 525px; border-radius: 100px; border: 1px solid #dfe1e5; display: flex; justify-content: center; align-items: center; } main .main-input input{ width: 450px; height: 40px; border: none; outline: none; }
Si lo ves diferente es porque avance un poco mas en el curso. Nuevamente gracias por tu ayuda
Julián Ramírez
Hola de nuevo, Ángel. Me gustaría ver tu código ya que cometí una suposición al decir que tú añadiste las medidas em cuando viendo bien estos estilos los aplica el navegador (en este caso Chrome) a todas las ul por defecto. Espero lo hayas podido resolver a pesar de este error que cometí. Estoy pendiente :D.
Angel Daniel Almanza Trejo
Oh vale, muchisimas gracias:3
Julián Ramírez
Debes tener cuidado con este tipo de propiedades y unidades de medida que usas. En tu código seguramente re-asignaste un valor de font-size en em y esto se va a ir sumando muchas veces sin entender cómo hasta que se forman este tipo de errores que en verdad vienen de mucho antes. A menos de que entiendas bien cómo funcionan estas medidas (em, rem) es mejor ser muy cauteloso con ellas :D.
Julián Ramírez
Al parecer sí se están heredando ya que no veo que hayas puesto ningún margin o padding sobre la clase nav-right-section. Por temas de especificidad (al llamar al header y después a tu clase) se deberían aplicar los estilos. Así que prueba en poner padding: 0; (o padding-left:0;) y después sí el margin que quieres pero sobre esta clase. Por último noto que a todos los ul les estás dando un margin-block-start: 1em; que para este caso sería lo mismo que un margin-left: 1em; que en teoría coge el valor de los puntos que estás usando con tu tipografía pero no veo el porqué es 40. Viendo estos aspectos en tu código podrás entender por qué está pasando esto :D. Espero haberte ayudado, estoy atento si tienes alguna otra duda o si no fui claro en algo.
Angel Daniel Almanza Trejo
Gracias bro En esa parte me da un paddig que no entiendo de donde sale si se supone que era un margin
Julián Ramírez
¡Hola, Ángel! Si subes una captura de lo que te sale será más fácil saber si estás re-escribiendo algún estilo o quizás se están heredando estilos que no deseas... Pueden ser varias cosas.
