Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Dúvida sobre margin e padding

Boa noite, tenho uma dúvida quanto ao padding, margin, etc...

    margin: 0 0 0 0;

Se eu não me engano seria isso :

margin: cima direita baixo esquerda

Até então beleza, creio ser essa a ordem e se estiver errado me notifiquem hahaha. Minha dúvida é a seguinte, estou com dificuldade para entender como funciona quando se declara menos valores, como por exemplo:

margin: 20px 0 0;

Esse 20px refere-se a qual parte? Superior e Inferior? Poderiam me auxiliar, pois estou com dúvida quanto a forma de declarar esses valores. Deixarei mais um exemplo abaixo:

padding: 0 auto;
2 respostas
solução!

Olá André, tudo bem com você?

A ordem está correta sim, é no sentido horário mesmo!

quando você declara margin: 20px 0 0 ; O que irá acontecer é que o navegador colocará 20 para cima e zero para direita, baixo e esquerda.

Mas vou tentar simplificar dessa forma (utilizando como exemplo o margin mas o mesmo se aplica para padding):

  • Quando você declara 4 ou 3 valores (nesse caso ele irá colocar 0 no último) no margin ele irá adicionar na ordem que você citou.
  • Quando você declara 2 valores, o primeiro valor irá se refletir na parte vertical ( margin-top e margin-bottom) e o segundo na horizontal (margin-left e margin-right);
  • Quando você declara 1 valor ele aplica em todas as direções

Compreendeu ? Qualquer coisa estou a disposição :)

Abraços e Bons Estudos!

Compreendi, muito obrigado. :)