Diferença entre margem e preenchimento

Margin vs Padding
 

A diferença entre margem e preenchimento é um aspecto importante na CSS como margem e preenchimento são dois conceitos importantes usados ​​no CSS para fornecer espaçamento entre itens diferentes. O preenchimento e as margens não são intercambiáveis ​​e têm finalidades diferentes; portanto, devem ser usados ​​adequadamente. O preenchimento é o espaço entre o conteúdo e a borda de um bloco. A margem, por outro lado, é o espaço fora da borda de um bloco. Margem separa blocos dos blocos adjacentes, enquanto o preenchimento separa a borda do conteúdo.

O que é Padding?

Em CSS (Folhas de estilo em cascata), preenchimento é o espaço mantido entre o conteúdo e a borda. Ele separa o conteúdo de um bloco de sua borda. O preenchimento é transparente e também inclui a imagem de fundo ou a cor de fundo do elemento. A quantidade de preenchimento de um elemento é especificada usando o termo "preenchimento" no código CSS. Por exemplo, para adicionar um preenchimento de 25 pixels ao redor do conteúdo, é possível usar o seguinte código.

div
largura: 300 px;
altura: 300 px;
preenchimento: 25px;
borda: sólido de 25px;

Se necessário, diferentes valores de preenchimento também podem ser especificados separadamente para a esquerda, direita, superior e inferior. O seguinte trecho de código especifica diferentes valores de preenchimento para cada lado.

div
largura: 300 px;
altura: 300 px;
padding-top: 25px;
fundo de preenchimento: 35px;
preenchimento esquerdo: 5 px;
padding-right: 10 px;
borda: sólido de 25px;

O que é margem?

No CSS (Cascading Style Sheets), margem é o espaço fora da borda. Ele separa um bloco de outros blocos. A margem também é transparente, mas uma grande diferença no preenchimento é que a margem não inclui imagens de fundo ou cores de fundo aplicadas ao elemento. A quantidade de margem no CSS é especificada usando o termo "margem". O código a seguir aplicou uma margem de 25px ao redor do bloco div.

div
largura: 320px;
altura: 320px;
borda: 5px sólido;
margem: 25px;

Valores diferentes também podem ser especificados para lados diferentes do bloco. O código a seguir aplica valores de margem diferentes para cada lado.

div
largura: 320px;
altura: 320px;
borda: 5px sólido;
margem superior: 25 px;
margem inferior: 35px;
margem esquerda: 5 px;
margem direita: 10 px;

Qual é a diferença entre Margin e Padding?

• Preenchimento é o espaço entre a borda e o conteúdo, enquanto margem é o espaço fora da borda.

• O preenchimento separa o conteúdo de um bloco da borda. A margem separa um bloco do outro.

• O preenchimento consiste nas imagens de plano de fundo e nas cores de plano de fundo aplicadas ao conteúdo, enquanto a margem não possui conteúdo como.

• Margens de blocos adjacentes podem se sobrepor enquanto o preenchimento não se sobrepõe.

Resumo:

Padding vs Margin

Preenchimento é o espaço dentro da borda de um bloco que separa a borda do conteúdo. A margem é o espaçamento fora da borda que separa um bloco dos blocos adjacentes. Outra diferença é que o preenchimento inclui a imagem de plano de fundo e as cores de plano de fundo aplicadas ao redor do conteúdo, enquanto a margem não as contém. Às vezes, as margens dos blocos adjacentes se sobrepõem quando o navegador renderiza a página, mas, para preenchimento, isso não acontece.

Cortesia de imagens:

1. Modelo de caixa CSS de Felix.leg (CC BY-SA 3.0)