Hoje vou passar uma dica rápida de como ler a sintaxe dos valores de margin e padding, o que pode parecer confuso no começo, mas após um tempo fica fácil ler.

Essencialmente a sintaxe usada no valor de margin é a mesma de padding, mas são propriedades distintas: margin adiciona margem ao seu elemento, criando um espaço entre ele e os demais elementos, quando seu display != inline. Para padding, ele adiciona preenchimento no seu elemento, criando espaço entre a borda do elemento e seu conteúdo.

Sintaxe com 4 valores

Agora, vamos ler isso:

div {
    margin: 10px auto 10px auto;
}

Podemos ver que acima temos um valor com 4 tokens, sendo eles 10px, auto, 10px e auto novamente. A propriedade margin funciona como um shorthand para as demais margens individuais, sendo equivalente à:

div {
    margin-top: 10px;
    margin-right: auto;
    margin-bottom: 10px;
    margin-left: auto;
}

Mas como ler 10px auto 10px auto?

Vamos usar o relógio!

É só você usar o sentido horário para ler. Sempre é um shorthand para a sintaxe:

div {
    margin: top right bottom left;
}

Então você pode começar com top ao meio dia, e ir avançado o tempo até às 9h ser left.

Mas isso é para quando você vai usar a sintaxe com 4 tokens. Essa regra se aplica também ao padding.

Sintaxe com 2 valores

É um pouco mais simples. Na matemática, estamos acostumados com as coordenadas x, y, não é? No CSS, tiveram que beber muito para colocarem que a maioria das coisas são y, x, inclusive para as propriedades margin e padding.

Então, se tivermos:

div {
    margin: 8px 10px;
}

É essencialmente a mesma coisa de:

div {
    margin: 8px 10px 8px 10px;
    
    /* ou */
    margin-top: 8px;
    margin-bottom: 8px;
    
    margin-left: 10px;
    margin-right: 10px;
    
    /* ou */
    margin-block: 8px;
    margin-inline: 10px;
}

Isso porque temos no primeiro valor a distância vertical margin-block e no segundo a distância horizontal margin-inline. No começo demora um pouco para acostumar porque sempre pensamos na distância horizontal como o primeiro valor, porque é aceitável na matemática assim. Mas CSS é bom demais para seguir esse padrão aceito mundialmente.

Sintaxe com 1 valor

Esse é mais simples ainda, juro! Ao definir:

div {
    margin: 10px;
}

Você tem essencialmente 10px de distância em todos os eixos, o que é equivalente à:

div {
    margin: 10px 10px 10px 10px;
}

E você ainda pode sobrecarregar eixos individuais ao definir para todos:

div {
    margin: 10px;
    margin-bottom: 40px; /* todos os eixos terão 10px de distância, exceto o
                            de baixo, que será 40px */
}

---

Essa é a dica de CSS de hoje. Espero trazer mais no futuro que sejam úteis para vocês. Comente o que achou e se tem mais alguma dica para colaborar 👇