Validación HTML: CSS: "margin": Demasiados valores o los valores no son reconocidos.

Acerca de este problema de CSS

La propiedad shorthand margin establece el área de margen en los cuatro lados de un elemento. Acepta de uno a cuatro valores, donde cada valor debe ser una longitud CSS válida (ej., 10px, 1em, 0), un porcentaje, o la palabra clave auto. Cuando el validador reporta “Demasiados valores o los valores no son reconocidos,” significa que se proporcionaron más de cuatro valores, o al menos uno de los valores es algo que CSS no entiende — como una unidad mal escrita, una unidad faltante en un número distinto de cero, o una palabra clave inválida.

Las causas comunes de este error incluyen:

Demasiados valores: Proporcionar cinco o más valores (ej., margin: 1px 2px 3px 4px 5px). El shorthand acepta un máximo de cuatro.
Unidades faltantes: Escribir un número distinto de cero sin una unidad (ej., margin: 10 en lugar de margin: 10px). Solo 0 es válido sin una unidad.
Errores tipográficos o unidades inválidas: Usar una unidad mal escrita o inexistente como margin: 10xp o margin: 10pixels.
Palabras clave inválidas: Usar una palabra clave que no es reconocida en el contexto de margin (ej., margin: none). La única palabra clave no-global que margin acepta es auto.
Separadores faltantes o caracteres extra: Incluir comas u otros caracteres inesperados entre valores (ej., margin: 10px, 20px). Los valores deben estar separados por espacios, no por comas.

Esto es importante porque los navegadores pueden ignorar o malinterpretar una declaración margin inválida por completo, llevando a layouts rotos o inconsistentes entre diferentes navegadores. Escribir CSS válido asegura una renderización predecible y un mantenimiento más fácil.

Cómo funcionan los valores del shorthand `margin`

El número de valores que proporciones determina cómo se aplican:

1 valor: Se aplica a los cuatro lados. margin: 10px → arriba, derecha, abajo e izquierda todos obtienen 10px.
2 valores: El primero es arriba y abajo, el segundo es izquierda y derecha. margin: 10px 20px → arriba/abajo 10px, izquierda/derecha 20px.
3 valores: El primero es arriba, el segundo es izquierda y derecha, el tercero es abajo. margin: 10px 20px 30px.
4 valores: Se aplican en sentido horario — arriba, derecha, abajo, izquierda. margin: 10px 20px 30px 40px.

Ejemplos

❌ Demasiados valores

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

❌ Unidad faltante en un número distinto de cero

.box {
  margin: 10 20px;
}

❌ Palabra clave inválida

.box {
  margin: none;
}

❌ Valores separados por comas

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

✅ Correcto: de uno a cuatro valores válidos

/* Los cuatro lados */
.box {
  margin: 10px;
}

/* Arriba/abajo e izquierda/derecha */
.box {
  margin: 10px 20px;
}

/* Arriba, izquierda/derecha, abajo */
.box {
  margin: 10px auto 20px;
}

/* Arriba, derecha, abajo, izquierda */
.box {
  margin: 10px 20px 30px 40px;
}

✅ Correcto: usando `auto` para centrar

.container {
  margin: 0 auto;
}

✅ Correcto: cero sin una unidad

.box {
  margin: 0;
}

✅ Correcto: usando palabras clave globales

.box {
  margin: inherit;
}

Si necesitas establecer márgenes en más de cuatro lados independientemente (lo cual no es posible — los elementos solo tienen cuatro lados), probablemente tienes un error de lógica. Si quieres control granular, usa las propiedades longhand individuales (margin-top, margin-right, margin-bottom, margin-left) en lugar del shorthand.