Tudo sobre margin e padding

Tudo sobre margin e padding

Muitos tem dúvida quando começa a programar sobre as reais diferenças entre as propriedades margin e padding do css.
Sem dúvida são essenciais, e são largamente usadas em construção e edição de blogs e sites.

Embora tenham praticamente a mesma atitude e sejam bem parecidos,os atributos CSS margin e padding são bem diferentes.


Margin é a margem que há desde um elemento até os que tiverem ao seu lado.  É a distância de um elemento para os demais externos.

Padding é o espaço que há em um container entre o conteúdo e as bordas do container. É a distência que um elemento delimita para outros internos.


Ou seja, ao especificar uma margin estamos definindo um espaço entre uma camada e as camadas texto, imagens ou outros conteúdos que tiver ao lado ou fora.
Ao especificar um padding em uma camada, por exemplo, estamos definindo o espaço que há entre a borda da camada e o que tiver dentro.


Ao utilizar estas duas propriedades voce deve informar os valores dos quatro cantos sendo:
  • Topo. -> top
  • Direita  -> right
  • Esquerda -> left
  • Baixo ->bottom
Cada valor declarado deve se referir a cada lado do elemento no HTML.
O primeiro valor é para o topo , e eles seguem um sentido horário, portanto, o próximo valor seria para a direita, depois para baixo e por último à esquerda.

Ex.1: padding: 1px (topo), 1px (direita), 1px (abaixo), 1px (esquerda).
margin: 1px (topo), 1px (direita), 1px (abaixo), 1px (esquerda).

Se você definir um valor único, a distância aplica-se a todos os lados, ela será aplicada aos 4 lados do elemento HTML.
Ex.2:
margin: 5px;
padding: 8px;