Validación HTML: CSS: "padding": "none" no es un valor de "padding".

Acerca de este problema de CSS

La propiedad abreviada padding establece el área de padding en los cuatro lados de un elemento. Acepta de uno a cuatro valores, cada uno de los cuales debe ser un <length> (por ejemplo, 10px, 1em), un <percentage>, o 0. A diferencia de otras propiedades CSS como border, outline, o max-width, la propiedad padding no tiene una palabra clave none en su sintaxis de valores.

Este es un error común porque varias propiedades CSS sí aceptan none — por ejemplo, border: none, text-decoration: none, y display: none. Es natural asumir que padding: none funcionaría de la misma manera, pero la especificación CSS simplemente no lo define para padding. Cuando un navegador encuentra un valor inválido, ignora la declaración completamente, lo que significa que tu estilo deseado no se aplicará y el elemento puede mantener su padding por defecto o heredado. Esto puede llevar a problemas de diseño inesperados que son difíciles de depurar.

La misma regla aplica para la propiedad margin — margin: none también es inválido. Usa margin: 0 en su lugar.

Cómo solucionarlo

Reemplaza none con 0. No necesitas incluir una unidad cuando el valor es cero, así que padding: 0 es perfectamente válido y es la forma idiomática de expresar “sin padding.” También puedes usar 0 para propiedades de padding individuales como padding-top, padding-right, padding-bottom, y padding-left.

Si solo quieres eliminar el padding en lados específicos, apunta a esos lados individualmente en lugar de usar la propiedad abreviada.

Ejemplos

❌ Incorrecto: usar `none` con `padding`

.card {
  padding: none;
}

El validador reportará: CSS: “padding”: “none” no es un valor de “padding”. El navegador ignorará esta declaración.

✅ Correcto: usar `0` para eliminar padding

.card {
  padding: 0;
}

✅ Correcto: eliminar padding en lados específicos

.card {
  padding-top: 0;
  padding-bottom: 0;
}

❌ Incorrecto: usar `none` en estilos inline

<div style="padding: none;">Content</div>

✅ Correcto: usar `0` en estilos inline

<div style="padding: 0;">Content</div>

✅ Correcto: usar valores de padding válidos

/* Valor único — aplica a los cuatro lados */
.card {
  padding: 16px;
}

/* Dos valores — vertical | horizontal */
.card {
  padding: 10px 20px;
}

/* Cuatro valores — arriba | derecha | abajo | izquierda */
.card {
  padding: 10px 20px 15px 5px;
}

/* Cero arriba/abajo, 1em izquierda/derecha */
.card {
  padding: 0 1em;
}