Como alterar cada lado do padding do BoxModel de forma individual?

Olá, Rafael, como vai?

No CSS, quando o valor de uma propriedade é 0, não é obrigatório especificar a unidade de medida, como px, pois 0 é um valor absoluto e não depende da unidade. Isso vale para propriedades como margin, padding e border.

Por exemplo, os dois trechos abaixo têm o mesmo efeito:

padding: 0 10px 5px 20px;

padding: 0px 10px 5px 20px;

Para alterar cada lado do padding de forma individual, você pode usar as propriedades específicas para cada lado: padding-top, padding-right, padding-bottom e padding-left. Dessa forma, você consegue definir um valor diferente para cada lado do elemento.

Exemplo:

elemento {
  padding-top: 10px;
  padding-right: 15px;
  padding-bottom: 20px;
  padding-left: 25px;
}

Alternativamente, você pode usar a shorthand padding, passando os valores na ordem: topo, direita, baixo e esquerda. Veja como ficaria:

elemento {
  padding: 10px 15px 20px 25px;
}

Nessa shorthand, os valores são atribuídos assim:

• 1 valor: aplica a todos os lados.
• 2 valores: o primeiro é para o topo e baixo, o segundo para a direita e esquerda.
• 3 valores: o primeiro é para o topo, o segundo para a direita e esquerda, e o terceiro para o baixo.
• 4 valores: cada um é aplicado a um lado (topo, direita, baixo, esquerda).

Para saber mais:

Sugestão de conteúdo para você mergulhar ainda mais sobre o tema:

• [Artigo] - Entendendo como funciona o Box Model e o Box Sizing
• [Documentação] - Padding - CSS | MDN

Espero ter ajudado!

Siga firme nos seus estudos e conte com o fórum sempre que precisar.

Abraços :)