Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Width: auto x width: 100%

Opa, gostaria de saber se existe diferença em declarar Width: auto ou width: 100%

Obrigado

3 respostas
solução!

Oi Rodrigo, tudo certo?

O 100% vai ficar com 100% da largura do elemento pai, não importando se esse elemento (o filho) tem uma borda ou padding, o que acaba fazendo com que o filho "vaze" do elemento pai.

Já com o auto, se o elemento filho tiver uma borda/padding, ele vai se ajustar para que não ocorra esse "vazamento".

Fiz essa imagem aqui, talvez fique mais claro:

Fiz esse Jsbin com o mesmo resultado da imagem acima.

Ah, hoje até temos uma propriedade para que o comportamento desses dois, 100% e auto, se comportem da mesma maneira, a box-sizing. Você pode conferir o suporte tela, que já está bem ok, aqui no Can I Use.

Espero ter ajudado,

Abcs!

Ah, entendi. No caso se eu usar o box-sizing eles se comportarão da mesma forma.

Valeu Natan, abraço ;)

Rodrigo,

Exatamente. Depois marque minha resposta como solução para darmos o tópico como solucionado?

Abcs!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software