Margem vs Preenchimento
A diferença entre margem e preenchimento é um aspecto importante em CSS, pois margem e preenchimento são dois conceitos importantes usados em CSS para fornecer espaçamento entre itens diferentes. Preenchimento e margens não são intercambiáveis e têm finalidades diferentes, portanto, devem ser usados de forma adequada. 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. A margem separa os blocos dos blocos adjacentes, enquanto o preenchimento separa a borda do conteúdo.
O que é preenchimento?
Em CSS (Cascading Style Sheets), padding é 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 inclui a imagem de fundo ou a cor de fundo do elemento também. A quantidade de preenchimento de um elemento é especificada usando o termo “preenchimento” no código CSS. Por exemplo, para adicionar um preenchimento de 25px ao redor do conteúdo, o código a seguir pode ser usado.
div {
largura: 300px;
altura: 300px;
preenchimento: 25px;
borda: 25px sólido;
}
Se necessário, diferentes valores de preenchimento podem ser especificados separadamente para esquerda, direita, superior e inferior também. O código a seguir especifica diferentes valores de preenchimento para cada lado.
div {
largura: 300px;
altura: 300px;
padding-top: 25px;
acolchoamento inferior: 35px;
padding-left: 5px;
padding-right: 10px;
borda: 25px sólido;
}
O que é margem?
Em 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 com o preenchimento é que a margem não inclui imagens de fundo ou cores de fundo aplicadas ao elemento. A quantidade de margem em 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 diferentes valores de margem para cada lado.
div {
largura: 320px;
altura: 320px;
borda: 5px sólido;
margem superior: 25px;
margin-bottom: 35px;
margem esquerda: 5px;
margem direita: 10px;
}
Qual é a diferença entre Margin e Padding?
• Preenchimento é o espaço entre a borda e o conteúdo, enquanto a 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 e cores de fundo aplicadas ao conteúdo, enquanto a margem não contém tal conteúdo.
• As margens dos 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 fundo e as cores de fundo aplicadas ao redor do conteúdo, enquanto a margem não as contém. As margens dos blocos adjacentes podem às vezes se sobrepor quando o navegador renderiza a página, mas para o preenchimento, isso não acontecerá.
Cortesia de imagens:
