CSS: “padding-right”: valores negativos X não são permitidos.

A propriedade padding-right define o espaço entre o conteúdo de um elemento e a sua margem direita. De acordo com a especificação do CSS Box Model, o padding representa espaço interno dentro de um elemento, e conceitualmente, espaço interno negativo não faz sentido — não pode ter menos que zero espaço entre conteúdo e a sua margem. Esta regra aplica-se igualmente a todas as propriedades de padding: padding-top, padding-right, padding-bottom, padding-left, e a forma abreviada padding.

Os navegadores irão tipicamente ignorar ou descartar um valor de padding negativo, o que significa que o ajuste de layout pretendido não terá efeito. Para além de ser simplesmente CSS inválido, isto pode levar a renderização inconsistente entre navegadores e comportamento de layout inesperado. Depender de valores inválidos torna as suas folhas de estilo frágeis e mais difíceis de manter.

Se o seu objetivo é aproximar um elemento do seu vizinho ou criar um efeito de sobreposição, margin-right é a propriedade apropriada a usar. Ao contrário do padding, as margens são explicitamente permitidas ter valores negativos. Margens negativas reduzem o espaço entre elementos ou até causam sobreposição, o que é muitas vezes a intenção real por trás de uma tentativa de padding negativo.

Como corrigir

1. Defina o valor como 0 ou um número positivo. Se simplesmente não quer padding, use 0. Se precisar de algum espaçamento, use um valor positivo.
2. Use margin-right para espaçamento negativo. Se precisar de reduzir espaço externo ou criar sobreposição, mude para uma margem negativa em vez disso.
3. Reavalie a sua abordagem de layout. Em alguns casos, usar transform: translateX(), gap do Flexbox, ou layout Grid pode conseguir o resultado desejado de forma mais limpa que valores negativos em qualquer propriedade.

Exemplos

Incorreto: valor de padding negativo

<style>
  .sidebar {
    padding-right: -10px;
  }
</style>
<div class="sidebar">
  <p>Sidebar content</p>
</div>

Isto desencadeia o erro do validador porque -10px não é um valor válido para padding-right.

Corrigido: usando zero ou um valor positivo

<style>
  .sidebar {
    padding-right: 0;
  }
</style>
<div class="sidebar">
  <p>Sidebar content</p>
</div>

Corrigido: usando uma margem negativa em vez disso

Se a intenção era reduzir o espaçamento externo no lado direito, use margin-right:

<style>
  .sidebar {
    padding-right: 0;
    margin-right: -10px;
  }
</style>
<div class="sidebar">
  <p>Sidebar content</p>
</div>

Corrigido: usando transform para deslocamento visual

Se o objetivo é deslocar visualmente o elemento sem afetar o fluxo do documento, transform é outra opção:

<style>
  .sidebar {
    padding-right: 0;
    transform: translateX(10px);
  }
</style>
<div class="sidebar">
  <p>Sidebar content</p>
</div>

Referência rápida: padding vs. margin

Escolha a propriedade que corresponde à sua intenção de layout, e lembre-se que todas as quatro direções de padding — padding-top, padding-right, padding-bottom, e padding-left — seguem a mesma regra não-negativa.

Saiba mais:

MDN Reference

MDN Web Docs: padding

→

W3C Reference

W3C CSS 2.2 Specification: padding properties

→

web.dev Article

Web.dev: Learn CSS - The Box Model: padding

→