Sobre este problema de CSS
Ao contrário das propriedades margin, que aceitam valores negativos para aproximar elementos ou sobrepô-los, todas as propriedades padding (padding-top, padding-right, padding-bottom, padding-left, e a abreviação padding) estão definidas na especificação CSS para aceitar apenas comprimentos zero ou positivos. Isto acontece porque o padding representa o espaço dentro de um elemento entre o seu conteúdo e a sua borda — um espaço interno negativo não é um conceito significativo.
Quando você usa um valor de padding negativo, os navegadores normalmente ignoram completamente a declaração, o que significa que o seu layout pode não ficar como você pretendia. O validador W3C detecta isto para ajudá-lo a identificar código que não se comportará de forma consistente entre navegadores e não está em conformidade com a especificação CSS.
Se o seu objetivo é reduzir o espaço entre elementos, valores negativos de margin são a ferramenta correta. Se está a tentar deslocar conteúdo para cima dentro de um contentor, considere usar position: relative com um offset negativo de top, ou ajuste o layout com outras técnicas como transform: translateY().
Exemplos
❌ Inválido: valor de padding negativo
<div style="padding-top: -20px;">
Este elemento tem padding negativo inválido.
</div>O validador reportará: CSS: “padding-top”: “-20” valores negativos não são permitidos.
✅ Corrigido: usando zero ou padding positivo
<div style="padding-top: 0;">
Este elemento não tem padding superior.
</div><div style="padding-top: 10px;">
Este elemento tem padding superior positivo válido.
</div>✅ Alternativa: usando margin negativo em vez disso
Se você precisa reduzir o espaço acima de um elemento, use um margin-top negativo:
<div style="margin-top: -20px;">
Este elemento é puxado para cima com uma margem negativa.
</div>❌ Inválido: valores negativos na abreviação padding
A mesma regra aplica-se à propriedade de abreviação padding. Qualquer valor de componente negativo é inválido:
<div style="padding: -10px 20px 15px 20px;">
Padding de abreviação inválido.
</div>✅ Corrigido: valores de abreviação todos positivos
<div style="padding: 0 20px 15px 20px;">
Padding de abreviação válido com padding superior zero.
</div>✅ Alternativa: usando transform para offset visual
Se você precisa deslocar visualmente o conteúdo de um elemento para cima sem afetar o fluxo do layout, transform é uma opção limpa:
<div style="transform: translateY(-20px);">
Este elemento aparece deslocado para cima.
</div>Encontre problemas como este automaticamente
O Rocket Validator analisa milhares de páginas em segundos, detetando problemas HTML em todo o seu site.