Sobre este problema de CSS
Em CSS, valores de propriedades como comprimentos, percentagens e palavras-chave são escritos sem aspas. As aspas em CSS são reservadas para contextos específicos como strings da propriedade content, nomes de famílias de fontes com espaços e caminhos url(). Quando envolve um valor margin (ou qualquer valor de propriedade CSS similar) em aspas duplas ou simples, o analisador CSS interpreta-o como uma string literal em vez de um conjunto de valores de comprimento ou palavra-chave. Como "0 0 1em 0" é uma string e não um valor margin válido, a declaração é ignorada pelos navegadores e sinalizada pelo validador W3C.
Isto é um problema por várias razões. Primeiro, o estilo falhará silenciosamente — os navegadores descartam declarações CSS que não conseguem analisar, por isso as suas margens pretendidas não serão aplicadas, potencialmente quebrando o seu layout. Segundo, indica uma incompreensão da sintaxe CSS que pode levar a erros similares noutras propriedades. Este erro ocorre comummente quando os programadores confundem as regras de aspas de atributos HTML com a sintaxe de valores CSS, especialmente ao escrever atributos style inline onde o próprio valor do atributo já está entre aspas.
A propriedade margin aceita de um a quatro valores, cada um dos quais pode ser um comprimento (ex., 10px, 1em), uma percentagem, auto, ou uma palavra-chave global como inherit. Nenhum destes requer aspas. A correção é simples: remova as aspas à volta do valor CSS.
Exemplos
❌ Incorreto: valor margin envolvido em aspas
Num bloco <style>:
<style>
.card {
margin: "0 0 1em 0";
}
</style>
Num estilo inline:
<p style="margin: '10px auto'">Hello</p>
Ambos produzem o erro do validador porque o analisador CSS vê uma string entre aspas em vez de valores margin válidos.
✅ Correto: valor margin sem aspas
Num bloco <style>:
<style>
.card {
margin: 0 0 1em 0;
}
</style>
Num estilo inline:
<p style="margin: 10px auto">Hello</p>
Formatos válidos de valores margin
Para referência, aqui estão os padrões aceites para a propriedade margin — nenhum dos quais usa aspas:
/* Todos os quatro lados */
margin: 1em;
/* Vertical | Horizontal */
margin: 5% auto;
/* Topo | Horizontal | Fundo */
margin: 1em auto 2em;
/* Topo | Direita | Fundo | Esquerda */
margin: 2px 1em 0 auto;
/* Palavras-chave globais */
margin: inherit;
margin: initial;
margin: unset;
Cuidado com a confusão de aspas em estilos inline
Uma fonte comum deste erro é a confusão sobre as aspas usadas para o atributo HTML style versus os valores CSS dentro dele. As aspas externas delimitam o valor do atributo para HTML — o CSS no interior não deve ter as suas próprias aspas à volta dos valores das propriedades:
<!-- ❌ Errado: aspas extra à volta do valor CSS -->
<div style="margin: '1em'"></div>
<!-- ✅ Correto: apenas o atributo HTML tem aspas -->
<div style="margin: 1em"></div>
Esta mesma regra aplica-se a outras propriedades CSS como padding, border, font-size, color, e assim por diante. Se vir um erro similar do validador para qualquer propriedade CSS, verifique se acidentalmente colocou o valor entre aspas.
Encontre problemas como este automaticamente
O Rocket Validator analisa milhares de páginas em segundos, detetando problemas HTML em todo o seu site.