Dando segmento à série de artigos Aprenda CSS e HTML, hoje veremos sobre a diferença entre Margin e Padding, que são propriedades que nos p...

Diferenças entre Margin e Padding

Dando segmento à série de artigos Aprenda CSS e HTML, hoje veremos sobre a diferença entre Margin e Padding, que são propriedades que nos permite adicionar espaço em branco entre os elementos HTML, evitando que os elementos fiquem “grudados”.
Embora ambas possuirem funções semelhantes, cada uma possui sua particularidade.
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.
Para melhor entendimento, veja imagem:
Assim como você tem a possibilidade de definir bordas para cada lado de seus elementos HTML(por exemplo:bordas na sidebar), você pode fazer o mesmo com as propriedades margin e padding. Tudo o que você precisará fazer é alterar os valores top, right, bottom e left.
Esses valores podem ser: auto, cm, mm, em, pt, pc, px, em, ex.
Utilizando margin e padding, você deve informar cada valor estabelecido nos quatro cantos, sendo eles: topo, direita, abaixo, esquerda. Cada valor declarado deve se referir a cada lado do elemento 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;
Padding: é o número de pontos em que o conteúdo está recuado dentro do objeto externo.

Margin: determina a distância de um elemento para outro.Podemos utilizar a propriedade margin para arrumar a distância entre o post e os limites da coluna da postagem, por exemplo.
Ou seja, ao estipular uma margin estamos definindo um espaço entre uma camada e as camadas texto, imagens ou outros conteúdos que tiver aos lados.
Ao estipular um padding em uma camada, por exemplo, estamos definindo o espaço que há entre a borda da camada e o que estiver dentro.

0 comentários: