Verificação HTML: CSS: "margin": Demasiados valores ou valores não são reconhecidos.

Sobre este problema de CSS

A propriedade shorthand margin define a área de margem nos quatro lados de um elemento. Aceita um a quatro valores, onde cada valor deve ser um comprimento CSS válido (por exemplo, 10px, 1em, 0), uma percentagem, ou a palavra-chave auto. Quando o validador reporta “Demasiados valores ou valores não são reconhecidos”, significa que foram fornecidos mais de quatro valores, ou pelo menos um dos valores é algo que o CSS não compreende — como uma unidade mal escrita, uma unidade em falta num número não-zero, ou uma palavra-chave inválida.

Causas comuns deste erro incluem:

Demasiados valores: Fornecer cinco ou mais valores (por exemplo, margin: 1px 2px 3px 4px 5px). O shorthand aceita um máximo de quatro.
Unidades em falta: Escrever um número não-zero sem uma unidade (por exemplo, margin: 10 em vez de margin: 10px). Apenas 0 é válido sem unidade.
Erros ou unidades inválidas: Usar uma unidade mal escrita ou inexistente como margin: 10xp ou margin: 10pixels.
Palavras-chave inválidas: Usar uma palavra-chave que não é reconhecida no contexto margin (por exemplo, margin: none). A única palavra-chave não-global que margin aceita é auto.
Separadores em falta ou caracteres extra: Incluir vírgulas ou outros caracteres inesperados entre valores (por exemplo, margin: 10px, 20px). Os valores devem ser separados por espaços, não vírgulas.

Isto é importante porque os navegadores podem ignorar ou interpretar mal uma declaração margin inválida completamente, levando a layouts quebrados ou inconsistentes entre diferentes navegadores. Escrever CSS válido garante renderização previsível e manutenção mais fácil.

Como funcionam os valores shorthand de `margin`

O número de valores que você fornece determina como são aplicados:

1 valor: Aplicado aos quatro lados. margin: 10px → topo, direita, base e esquerda recebem todos 10px.
2 valores: O primeiro é topo e base, o segundo é esquerda e direita. margin: 10px 20px → topo/base 10px, esquerda/direita 20px.
3 valores: O primeiro é topo, o segundo é esquerda e direita, o terceiro é base. margin: 10px 20px 30px.
4 valores: Aplicados no sentido horário — topo, direita, base, esquerda. margin: 10px 20px 30px 40px.

Exemplos

❌ Demasiados valores

/* Cinco valores — inválido */
.box {
  margin: 10px 20px 30px 40px 50px;
}

❌ Unidade em falta num número não-zero

.box {
  margin: 10 20px;
}

❌ Palavra-chave inválida

.box {
  margin: none;
}

❌ Valores separados por vírgulas

.box {
  margin: 10px, 20px;
}

✅ Correto: um a quatro valores válidos

/* Todos os quatro lados */
.box {
  margin: 10px;
}

/* Topo/base e esquerda/direita */
.box {
  margin: 10px 20px;
}

/* Topo, esquerda/direita, base */
.box {
  margin: 10px auto 20px;
}

/* Topo, direita, base, esquerda */
.box {
  margin: 10px 20px 30px 40px;
}

✅ Correto: usar `auto` para centrar

.container {
  margin: 0 auto;
}

✅ Correto: zero sem unidade

.box {
  margin: 0;
}

✅ Correto: usar palavras-chave globais

.box {
  margin: inherit;
}

Se você precisar de definir margens em mais de quatro lados independentemente (o que não é possível — os elementos só têm quatro lados), provavelmente tem um erro de lógica. Se quiser controlo detalhado, use as propriedades individuais longhand (margin-top, margin-right, margin-bottom, margin-left) em vez do shorthand.