Ainda não tem acesso? Estude com a gente! Matricule-se
Ainda não tem acesso? Estude com a gente! Matricule-se

Solucionado (ver solução)

Margin não funciona

Esse código é apenas um exemplo de que todas as vezes que utilizo "margin", no CSS, ele não funciona. Por exemplo, quando tive de dar espaço entre o conteúdo do cabeçalho com o topo do navegador ele não funcionou, ou agora que preciso dar um espaço nos formulários, ele também não funciona.

main {
    width: 940px;
    margin: 0 auto;
}

form {
    margin: 40px 0;
}
6 respostas

Olá Pedro!

Você está importando o arquivo CSS no seu documento HTML?

Olá Matheus. Sim, tudo funciona normalmente, mas em momentos específicos com o Margin e o Padding não, por exemplo:

footer { text-align: center; background: url('bg.jpg'); padding: 40px 0; }

Ps: Mesmo mudando esse valor "40" não ocorre alteração nenhuma.

Ou então aqui:

header { background: #BBBBBB; padding: 20px 0; }

Oi Pedro!

Só para entender um pouco melhor. Você está usando as propriedades em algum outro lugar do projeto ou algum outro seletor diferente que usa essas propriedades?

Eu fiz um teste aqui usando o seu código no codepen e não tive os mesmos problemas. Se puder mandar o seu projeto inteiro para eu dar uma olhada.

Vou mandar aqui o código que montei no codepen: https://codepen.io/ikyrie/pen/VwewGqj

Abraços.

Olá Matheus!

Eu vi que está aparecendo isso no console:

https://prnt.sc/st7qmj

Estou seguindo o passo a passo do instrutor.

solução

Olá Pedro!

Pelo o que estou vendo o reset.css que você está usando está sendo importado por último ou depois do seu arquivo de estilos.

Como o peso dos seletores que você está usando para colocar o margin: 0 auto é de peso 1 e o peso dos seletores do reset.css também é peso 1, quem vem por último é quem prevalece.

A solução é mudar a ordem do import do CSS Reset, fazer o reset ser o primeiro arquivo CSS a ser importado.

Se não funcionar eu peço que mande o seu projeto para ver melhor o que pode estar errado.

Um abraço!

Ola Matheus!

Deu certo. Era realmente a ordem dos links no HTML. Muito obrigado pela ajuda.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software