Solucionado
Eu nao entendi ao certo porque foi posicionado para direita com o uso do margin-left: auto. Eu dei uma googlada e vi que o valor auto define que a propriedade vai ser calculada pelo navegador, mas nao entendi a logica que acontece esse calculo. Como e porque ficou ao lado direito o button ao utilizar margin-left: auto?
Obs.: ha uma outra duvida sobre este mesmo assunto postada no ano passado, mas a resposta nao foi clara para mim. Por isso, abri esta duvida.
Fala Tiago, tudo bem?
Quando utilizamos o margin-left, estamos aplicando uma margem no lado esquerdo do elemento, logo, o deslocamento ocorre para o lado direito!
Quando utilizamos o auto, pedimos para que o navegador defina o valor aplicado de margem, de acordo com o espaço disponível na tela do seu usuário.
Sacou a ideia? Se ainda não ficou claro, só perguntar novamente.
Abraços amigo!
Se eu entendi certo, o navegador irá calcular o espaço disponível a esquerda do elemento, isto sendo utilizado o margin-left: auto, e irá preencher a margem a esquerda do elemento com o espaço disponível que foi calculado. Assim, irá empurrar o elemento para direita. Estou correto?
Exatamente isso Tiago!
Se a margem calculada for de 20px, o elemento será deslocado para direita 20px.
--------20px--------->|ELEMENTO|
Pegou a ideia?
Abraços!
Certo, entendi. Então, o comportamento do valor auto para uma propriedade CSS é sempre calcular e preencher o espaço?
Fala Tiago!
O valor auto no CSS refere-se à automático.
Em outras palavras, quando utilizamos auto, estamos delegando a definição do valor para o navegador, de acordo com os cálculos de espaço disponíveis no momento!
Ou seja, o navegador irá se encarregar de definir um valor para nós.
Um uso bem comum é :
margin: 0 auto;Onde definimos margem 0 para o topo e rodapé e automático para os lados. (centralizará seu conteúdo!).
Se algo ainda não ficou claro, não hesite em perguntar!
Abraços e sucesso amigo!
Obrigado, Paulo!