Verificação HTML: CSS: "padding-block": "auto" não é um valor para "padding-block".

Sobre este problema de CSS

A propriedade shorthand padding-block define padding nos lados block-start e block-end de um elemento. Em modos de escrita horizontais (como português), isto corresponde ao padding superior e inferior; em modos de escrita verticais, mapeia para esquerda e direita. É o equivalente lógico de combinar padding-block-start e padding-block-end.

A razão pela qual auto é inválido aqui é que padding, por definição na especificação CSS, deve resolver para um tamanho definido. Margens podem ser auto porque o navegador usa esse valor em algoritmos de layout para distribuir o espaço restante (por exemplo, centralizar um elemento de bloco com margin-inline: auto). Padding, no entanto, adiciona espaço dentro da borda de um elemento e não tem tal comportamento de auto-distribuição definido na especificação. Tentar usar auto fará com que a declaração seja ignorada pelos navegadores, significando que nenhum padding é aplicado, o que pode levar a resultados de layout inesperados.

Este erro de validação surge frequentemente quando os programadores confundem padding-block com margin-block, ou quando copiam padrões de centralização que funcionam com margens e tentam aplicá-los a padding. Se a sua intenção era centralizar conteúdo, considere usar margin-block: auto em vez disso, ou use propriedades de alinhamento Flexbox/Grid.

Como corrigir

Substitua auto por um valor válido:

Valores de comprimento: 0, 10px, 1em, 1.5rem, etc.
Valores de percentagem: 5%, 2% 1%, etc. (relativos ao tamanho inline do bloco contentor).
Dois valores: padding-block: 20px 10px; define padding-block-start para 20px e padding-block-end para 10px.
Palavras-chave CSS-wide: inherit, initial, revert, revert-layer, ou unset.

Se usou auto para tentar eliminar padding, use 0 em vez disso. Se o usou para tentar centralizar algo, mude para margens ou um método de layout como Flexbox.

Exemplos

Incorreto: usar `auto` como valor de padding-block

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

O navegador ignorará completamente a declaração padding-block: auto, e o validador W3C marcará isto como um erro.

Correto: usar valores de comprimento

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

Correto: usar um valor único para padding igual

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

Correto: remover padding com zero

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

Se pretendia centralizar: use margin-block em vez disso

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

A abordagem margin-block: auto funciona dentro de contentores flex ou grid para distribuir espaço uniformemente, alcançando centralização vertical. Isto é provavelmente o que você quer se originalmente tentou usar padding-block: auto.