Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
7
respostas

Dúvida no CSS - Invalid property value

Referente ao curso HTML5 e CSS3 I: Suas primeiras páginas da Web, no capítulo Mais seletores e atividade Estilo para o link

por Vitor Somma
| 146.7k xp | 15 posts
Professor de Inglês

Olá, nesta etapa foi a primeira vez que fiz o download de como o projeto de vocês estava, para poder comparar com o meu e revisar tudo passo a passo. Percebi algo em comum que ainda não entendi.

Tanto no meu CSS quanto no do "projeto completo até aqui", a seguinte linha de comando em negrito aparece no elemento DIV:

.conteudo { padding: 30px auto; width: 720px; margin: auto; }

.container { width: 720px; margin: auto; padding: 30px auto; }

A função do "padding: 30px" eu entendo, mas este "auto" no final, além de não ter percebido diferença quando o adicionei e removi, notei a mensagem "Invalid property value" quando fui chegar o código através do navegador em ambos arquivos html.

Por que o utilizar então?

7 respostas
por Luiz Fernando Maehana
| 610.1k xp | 403 posts
Desenvolvedor Front-end

Fala Vitor,

No CSS a propriedade padding espera até 4 parâmetros, sendo na ordem top, left, bottom, right, se você passa 2, ele repete esses parâmetros para os outros, ou seja:


padding: 30px auto;

é a mesma coisa que

padding: 30px auto 30px auto;

é a mesma coisa que

padding-top: 30px;
padding-left: auto;
padding-bottom: 30px;
padding-right: auto;

Espero ter ajudado.

Abraços!

por Vitor Somma
| 146.7k xp | 15 posts
Professor de Inglês

Então, a mecânica do padding eu entendi. Minha dúvida é do por que ter aparecido essa mensagem de "Invalid property value" ao adicionar o "auto" ao comando.

por Luiz Fernando Maehana
| 610.1k xp | 403 posts
Desenvolvedor Front-end

Vitor,

Está dando erro exatamente nesta linha?

padding: 30px auto;

Pois não deveria, a sintaxe está correta, tens o código aí completo?

solução!
por Mario Souto
| 377.3k xp | 735 posts
Alura Scuba Team Instrutor e Desenvolvedor

Fala Vitor, o valor padrão do padding é o 0, o auto não se aplica no padding porque ele não tem como calcular de forma automática, ou é 0 ou algum valor especificado :)

https://developer.mozilla.org/en-US/docs/Web/CSS/padding

Aqui tem um link com a referência de algumas coisas da propriedade

Espero ter ajudado \o

por Thomás Soares de Assunção
| 93.9k xp | 7 posts
Programador Web

Como o Mario falou:

Alguns atributos não aceitam simplesmente o valor "auto", é tudo questão de lógica e configurações de outras marcações em HTML/CSS.

Exemplo:

O CSS pode calcular a MARGEM (Margin) tendo base a largura do objeto em questão e a largura do objeto anterior, pois ele vai apenas centralizar, porém o HTML/CSS não pode calcular automaticamente o PADDING, pois é algo de questão particular do desenvolvedor.

Espero não ter complicado sua cabeça, hehe.

por Vitor Somma
| 146.7k xp | 15 posts
Professor de Inglês

Olá, pessoal!

Luís Fernando, o código em questão é o do arquivo "site.css" disponível para download no "baixar o projeto completo até aqui ", que está no item 7 da aula 8 do curso. (https://cursos.alura.com.br/course/introducao-html-css/task/5424)

Ao abrirmos o arquivo "bio.html" deste download no navegador e ir em inspecionar elemento DIV, percebemos a mensagem de erro.

Mário e Thomás, agora sim eu entendi! Não complicou a cabeça não hehehe.

Muito obrigado ao todos que se dispuseram a me ajudar!

por Mario Souto
| 377.3k xp | 735 posts
Alura Scuba Team Instrutor e Desenvolvedor

Opa, sempre que precisar só chamar :)