Entendendo as propriedades de Margin e Padding

Compartilhar:
Você deve ter visto em seu template ou alguém ter falado para você a respeito de Margin e Padding, não é mesmo? Então, muitos não entendem as suas diferentes ou acham que essas duas propriedades são muito diferentes e essenciais para a criação e desenvolvimento de um template. Vamos aprender como elas funcionam, o que cada uma significa e muito mais.

O que é Margin e Padding

Padding: determina as margens internas, é responsável por determinar a distância entre o conteúdo de determinado elemento e sua borda.
Margin: determina a distância de um elemento para outro elemento.
Veja a imagem abaixo para melhor entendimento:


Utilizando margin e padding, você deve informar cada valor estabelecido nos quatro cantos, sendo eles: top (topo), right (direita), bottom (abaixo), left (esquerda). Cada valor estabelecido deve se referir a cada lado do elemento. 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 para a esquerda.
Veja o exemplo abaixo:
padding: 1px (topo), 1px (direita), 1px (abaixo), 1px (esquerda).
margin: 1px (topo), 1px (direita), 1px (abaixo), 1px (esquerda).
*Os valores representados acima não são reais e as partes destacadas de vermelho são para facilitar seu entendimento.
Caso você definir um único valor, a distância aplica-se a todos os lados, ela será aplicada aos 4 cantos do elemento HTML. Veja o exemplo abaixo:
margin: 5px;
padding: 8px;
Veja as ilustrações abaixo, e perceba como cada elemento (margin e padding) são essenciais e traz muitas diferenças entre os mesmos.



Ou seja, ao regular uma margin estamos definindo um espaço entre uma camada e as camadas  de texto, imagens ou outros conteúdos que tiver aos lados. Ao regular um padding em uma camada, estamos definindo o espaço que há entre a borda da camada e o que estiver dentro da mesma.

Pronto, estas são as diferenças e as funções de margin e padding. Viu como elas são importantes ao um template no momento de criação ou de personalização? Vale lembar que este artigo faz parte da nossa série de artigos Aprendendo HTML e CSS. Leia toda a nossa série para você entender melhor sobre HTML e CSS. Abraços e bom estudo!
► Postagens Relacionadas:

3 Comentários

Denis Gomez disse...

Não adianta, eu e CSS não nos entendemos :/

Eu continuo achando HTML muito mais fácil que CSS :D

30 de dezembro de 2011 às 23:42
João Neto disse...

Acho o CSS mais fácil que o HTML. Mas acho todos fácies de entender!

31 de dezembro de 2011 às 15:31
Denis Gomez disse...

rsrsrs, bem que eu queria entender fácil também :D

31 de dezembro de 2011 às 18:24

Postar um comentário