Ainda não tem acesso? Estude com a gente! Matricule-se
Ainda não tem acesso? Estude com a gente! Matricule-se

Solucionado (ver solução)

margin-left: auto

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.

6 respostas

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?

soluçã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!