[Dúvida] width: auto

Olá, Rian! Tudo bem?

No CSS, width: auto; e width: 100%; podem parecer semelhantes, mas eles têm comportamentos diferentes.

Quando você define width: 100%;, você está dizendo que o elemento deve ocupar 100% da largura do elemento pai. Ou seja, o elemento vai ocupar todo o espaço horizontal disponível dentro do seu elemento pai.

Por outro lado, quando você define width: auto;, o navegador calcula a largura do elemento. Isso significa que o elemento vai ocupar o espaço necessário para exibir o seu conteúdo, e não necessariamente todo o espaço disponível. Se o conteúdo do elemento for menor que a largura do elemento pai, então o elemento não vai ocupar toda a largura disponível.

No seu caso, se você não notou diferença ao usar width: auto; ou width: 100%;, é possível que o elemento já estivesse ocupando toda a largura do elemento pai por padrão. Ou seja, o conteúdo do elemento já era suficientemente grande para ocupar todo o espaço disponível, então tanto width: auto; quanto width: 100%; resultaram na mesma aparência.

Um exemplo prático:

div {
  width: auto; /* O div vai ocupar o espaço necessário para exibir seu conteúdo */
}

div {
  width: 100%; /* O div vai ocupar 100% da largura do elemento pai */
}

Espero ter ajudado.

Um abraço e bons estudos.