Como o título já diz: Qual exatamente é a diferença entre margin: 0 auto;
e margin: auto;
?
margin: 0 auto;
margin: auto;
Por que pode usar somente o 0? Qual seria a unidade desse 0? px? %?
Antes de mais nada, você precisa entender como escrever uma margem. Existem 4 formas de escrever a margem, entendendo que ela funciona em sentido horário começando pelo topo. Entenda que quando um lado não é definido, ele usará o mesmo definido para o seu oposto.
margin: /* top right bottom left */
margin: 0; /* margem de todos os lados = 0 */
margin: 0 1px; /* top/bottom = 0; right/left = 1px */
margin: 0 1px 2px; /* top = 0; right/left = 1px; bottom = 2px */
margin: 0 1px 2px 3px; /* top = 0; right= 1px; bottom = 2px; left = 3px */
Significa que o browser dará uma margem automática para todos os lados. A margem automática não irá funcionar em todas as ocasiões pois ela precisa de uma lógica para funcionar.
Por exemplo, em um elemento que tenha display: block
como é o default de uma div, colocando margin: 0 auto;
, significa que você dará margens automáticas na esquerda e na direita para centralizar o bloco horizontalmente na tela.
Já a margem 0, significa que você não quer margem alguma.
Para esclarecer o porque de o "0" não requerer unidades: independe a unidade, porque em qualquer unidade 0 = 0. Poderia ser 0px, 0rem, 0em, 0% e daria tudo no mesmo porque todos eles tem valor nulo. É diferente de, por exemplo: 1px, 1rem, 1em, 1%; estes resultados teriam todos valores diferentes, porque apenas o 1px é um valor estático. Os outros três valores dependem da construção ou de outros valores da página e podem ter resultados bem diferentes. Em conclusão, um 0, provavelmente nunca precisará de uma unidade pois o seu valor será nulo.
Quando você coloca:
margin: 0 auto;
Você está definindo margens esquerda e direita
do elemento para auto
e as margens superior e inferior para 0
.
Quando diz:
margin: auto;
Você está adicionando ao elemento margem auto
para todos os lados. (left,top, right, bottom)
margin: 0 auto;
Define as margens esquerda
e direita
do elemento e as margens auto
superior e inferior a 0
.
margin: auto;
Define todas as margens para auto
.
margin: [Primeiro parâmetro] [Segundo parâmetro];
Primeiro parâmetro = Definições verticais (todos os valores definidos aqui serão aplicados na vertical e/ou no TOP e no BOTTOM)
Segundo parâmetro = Definições horizontais (todos os valores definidos aqui serão aplicados na horizontal e/ou RIGHT e no LEFT)
Lembrando que, margin pode receber 2 parâmetros sendo eles os citados acima (Vertical e Horizontal) mas podem ser aplicados mais parâmetros, sendo aplicados no sentido horário. Exemplo:
margin: 1 2 4 6 [Sentido horário: 1 = Top, 2 = Right, 4 = Bottom, 6 = Left]
margin: auto; Quer dizer que todas as margens do elemento vão ser calculadas automaticamente margin: 0 auto; Quer dizer que as margens do topo e de baixo vão ser 0px e a da esquerda e da direita vão ser automáticas
AUTOMÁTICAS: quer dizer que o interpretados vai fazer um calculo baseado na largura ou na altura do elemento para que ambas as margens tenham o mesmo tamanho
isso é bastante usado para centralizar elementos, mas para isso é importante que você defina uma largura (caso você queira que ela tenha as margens iguais em ambos os lados) para a div ou o elemento que você quer centralizar na tela.