CSS: “padding-block”: “auto” no es un valor válido para “padding-block”.

La propiedad abreviada padding-block establece el padding en los lados block-start y block-end de un elemento. En modos de escritura horizontales (como el español), esto corresponde al padding superior e inferior; en modos de escritura verticales, se mapea a izquierda y derecha. Es el equivalente lógico de combinar padding-block-start y padding-block-end.

La razón por la que auto es inválido aquí es que el padding, por definición en la especificación CSS, debe resolverse a un tamaño definido. Los márgenes pueden ser auto porque el navegador usa ese valor en algoritmos de diseño para distribuir el espacio restante (por ejemplo, centrar un elemento de bloque con margin-inline: auto). El padding, sin embargo, añade espacio dentro del borde de un elemento y no tiene tal comportamiento de distribución automática definido en la especificación. Intentar usar auto hará que la declaración sea ignorada por los navegadores, lo que significa que no se aplica padding, lo cual puede llevar a resultados de diseño inesperados.

Este error de validación surge a menudo cuando los desarrolladores confunden padding-block con margin-block, o cuando copian patrones de centrado que funcionan con márgenes e intentan aplicarlos al padding. Si tu intención era centrar contenido, considera usar margin-block: auto en su lugar, o usa propiedades de alineación de Flexbox/Grid.

Cómo solucionarlo

Reemplaza auto con un valor válido:

• Valores de longitud: 0, 10px, 1em, 1.5rem, etc.
• Valores de porcentaje: 5%, 2% 1%, etc. (relativos al tamaño inline del bloque contenedor).
• Dos valores: padding-block: 20px 10px; establece padding-block-start a 20px y padding-block-end a 10px.
• Palabras clave CSS globales: inherit, initial, revert, revert-layer, o unset.

Si usaste auto para intentar eliminar el padding, usa 0 en su lugar. Si lo usaste para intentar centrar algo, cambia a márgenes o un método de diseño como Flexbox.

Ejemplos

Incorrecto: usar auto como valor de padding-block

<style>
  .box {
    padding-block: auto;
  }
</style>
<div class="box">Esta caja tiene padding inválido.</div>

El navegador ignorará completamente la declaración padding-block: auto, y el validador de W3C la marcará como error.

Correcto: usar valores de longitud

<style>
  .box {
    padding-block: 20px 10px;
  }
</style>
<div class="box">20px de padding en block-start, 10px en block-end.</div>

Correcto: usar un solo valor para padding igual

<style>
  .box {
    padding-block: 1em;
  }
</style>
<div class="box">1em de padding tanto en block-start como en block-end.</div>

Correcto: eliminar padding con cero

<style>
  .box {
    padding-block: 0;
  }
</style>
<div class="box">Sin padding de bloque.</div>

Si pretendías centrar: usa margin-block en su lugar

<style>
  .container {
    display: flex;
    flex-direction: column;
    height: 300px;
  }
  .centered {
    margin-block: auto;
  }
</style>
<div class="container">
  <div class="centered">Este elemento está centrado verticalmente usando margin-block: auto.</div>
</div>

El enfoque margin-block: auto funciona dentro de contenedores flex o grid para distribuir el espacio uniformemente, logrando centrado vertical. Esto es probablemente lo que querías si originalmente recurriste a padding-block: auto.

Más información:

MDN Reference

MDN: CSS padding-block

→