MARGIN

Margins são utilizadas para distanciar elementos uns dos outros dentro de uma página ou dentro de um espaço pré-determinado(container)

Para adicionar a propriedade margin em elementos dentro da página, usamos a seguinte sintaxe.

Ex:.
margin-top: 50px;
margin-bottom: 20px
margin-left: 30px;
margin-right: 25px;

margin-top - Define a distância do elemento em relação a parte superior da página ou em relação a outro elemento acima dele.

margin-left - Define a distância do elemento em relação a lateral esquerda da página ou em relação a outro elemento a esquerda dele.

margin-right - Define a distância da do elemento relativo a lateral direita da página ou a outro elemento a sua direita.

margin-bottom - Define a distância da do elemento relativo a parte inferior da página ou ao elemento de baixo.


ESCREVENDO MENOS

Supondo que você já saiba qual a distância que o elemento vai ter em relação ao conteúdo a sua volta, você pode eliminar as quatro linhas de código e utilizar apenas uma linha da seguinte forma.

margin: (top), (right), (bottom), (left);

Logo...
margin: 10px 20px 10px 20px;

Nesse caso você define um valor para cada posição respectivamente nessa ordem(top, right, bottom, left). Dessa forma você economiza linha de código, escreve menos e faz muito mais de forma rápida.

Agora, considerando que left e right possuam o mesmo valor, e top e bottom possuam o mesmo valor, podemos utilizar uma forma mais reduzida de se escrever.

margin: (top, bottom) (left, right)

Logo...
margin: 10px 20px;

Nesse caso você define um valor para top e bottom e um valor para right e left respectivamente.

Ainda, se todas os quatro valores forem iguais, podemos usar apenas...

margin: (top, right, bottom, left) 

Logo...
margin: 10px;

Nesse caso você define um valor para todas as posições de uma unica vez.

Simples assim :)

CENTRALIZANDO UM ELEMENTO NA PÁGINA.

Existem diversas formas que você pode usar para centralizar um elemento na tela. Uma das mais utilizadas, principalmente em containers que compreendem outros elementos é o margin: 0 auto;

O zero, significa que em relação ao top e bottom, ele não recebe nenhum valor e por isso, ele ficará grudado na parte superior da tela ou de sua div pai. O auto, significa que o elemento manterá exatamente a mesma distância da lateral esquerda e da lateral direita da página ou de seu elemento pai. Com essas configurações ele será centralizado.

PADDING

O Padding funciona um pouco diferente do margin. O padding cria uma distância entre as extremidades de um determinado container e seus elementos internos.

Da mesma forma que o margin, podemos atribuir ao padding, as seguintes 
propriedades com valores diferentes.

Ex:.
padding-top: 50px;
padding-bottom: 20px;
padding-left: 30px;
padding-right: 25px;

ESCREVENDO MENOS

Assim como o margin, supondo que você já saiba qual a distância que o elemento vai ter em relação a extremidade de seu container, você pode eliminar as quatro linhas de código e utilizar apenas uma linha da seguinte forma.

padding: (top), (right), (bottom), (left);

Logo...
padding: 10px 20px 10px 20px;

Agora considerando que left e right possuam o mesmo valor, e top e bottom possuam o mesmo valor, podemos utilizar uma forma mais reduzida ainda de se escrever, assim como com margin.

padding: (top, bottom) (left, right)

Logo...
padding: 10px 20px;

Ainda, se for um valor único para todos os lados, apenas...

padding: (top, right, bottom, left) 

Logo...
padding: 10px;

No vídeo abaixo vamos aplicar esses exemplos criando um container e inserindo um objeto dentro dele.



Se esse post te ajudou de alguma forma, deixe seu comentário. :)