Entendendo as propriedades de Margin e Padding

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!