Diferença Entre Margem E Preenchimento

2024 Autor: Mildred Bawerman | [email protected]. Última modificação: 2023-12-16 08:41

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: