Cual es la diferencia entre poner <code>header { width: 100%; } </code> Y <code>header { width: auto; } </code>

Pregunta de la clase:
Estilos CSS para Clonar el Header de una Página Web
Stefano Lopez Moriconi

Stefano Lopez Moriconi

Pregunta
student•hace 3 años

Cual es la diferencia entre poner

header { width: 100%; }
Y
header { width: auto; }

2 respuestas
para escribir tu comentario
    Benjamin Allen Ramirez Horna

    Benjamin Allen Ramirez Horna

    student•hace 3 años

    gracias por la respuesta axel!

    Axel Yaguana

    Axel Yaguana

    Team Platzi•hace 3 años

    ¡Hola, Stefano! 😃

    • width: auto
      mantendrá prácticamente la proporción del tamaño del contenedor hijo con respecto al contenedor padre, incluso si se agregan márgenes o padding.

    • width: 100%
      Hará que el contenedor hijo sea tan grande como el contenedor padre, sin tener en cuenta los márgenes o paddings. Esto podría ser un problema.

    Te dejo una imagen para que veas la diferencia.

Curso Práctico de HTML y CSS

Curso Práctico de HTML y CSS

Construye un clon de Google usando HTML y CSS. Aprende a estructurar y estilizar un sitio web completo, desde el header hasta el footer, usando técnicas de maquetación como Flexbox y Grid. Ideal para afianzar tus fundamentos.

Ir al curso
Curso Práctico de HTML y CSS
Curso Práctico de HTML y CSS

Curso Práctico de HTML y CSS

Construye un clon de Google usando HTML y CSS. Aprende a estructurar y estilizar un sitio web completo, desde el header hasta el footer, usando técnicas de maquetación como Flexbox y Grid. Ideal para afianzar tus fundamentos.

Ir al curso