Use Margin e Padding em CSS

1. Introdução de Margin em CSS
2. Introdução de Padding em CSS

A margem e o preenchimento podem ser semelhantes em CSS, mas são diferentes. Este tutorial apresentará margem e preenchimento em CSS. Então saberemos a diferença entre eles e aprenderemos quando usar margem e preenchimento.

Introdução de Margin em CSS

Em CSS, a margem é o espaço entre quaisquer dois elementos adjacentes. É o espaço entre a borda dos dois elementos adjacentes. A margem de qualquer elemento não controla o espaço dentro do elemento. Em vez disso, é responsável pelo espaço fora do elemento. Usamos a propriedade margin para especificar a margem de todos os quatro lados do elemento. Escrevemos quatro valores na propriedade margin. Os valores representam margin-top, margin-right, margin-bottom e margin-left em ordem. Podemos ilustrar a seguir.

element {
margin: 20px 20px 20px 20px;
}

O código acima define a margem de 20px de um elemento de todos os quatro lados.

Quando usamos apenas os três valores, o valor do meio representa as propriedades margin-left e margin-right. Se a propriedade margin tiver apenas dois valores, o primeiro valor representa a margem superior e inferior, e o segundo representa a margem esquerda e direita. Um único valor de margem representa a margem em todos os quatro lados.

Agora, vamos demonstrar o que é uma margem. Por exemplo, crie dois divs com redbox e bluebox como suas classes. Dê height e width de 200px para cada uma das classes. Defina a background-color das caixas como red e blue. Em seguida, defina a propriedade margin-bottom da redbox, a caixa superior, para 20px.

O exemplo abaixo cria duas caixas de cores vermelha e azul. A propriedade margin-bottom fornece um espaço de 20px da borda da caixa vermelha na direção inferior. Isso significa que a caixa azul terá uma distância de 20px da caixa vermelha. Se removermos a propriedade margin-bottom, o espaço será removido e as duas caixas serão anexadas. Observe que os textos em ambas as caixas são anexados às bordas das caixas, sem espaços à esquerda e ao topo.

Código de exemplo:

<div class="redbox"> Red Box </div>
<div class="bluebox"> Blue Box </div>

.redbox {
 height:200px;
 width: 200px;
 background-color:red;
 margin-bottom:20px;
}

.bluebox {
 height:200px;
 width: 200px;
 background-color:blue;
 color:white;
}

Podemos usar a margem CSS se quisermos alterar a posição de um elemento em nossa página da web. Usando a propriedade margin, podemos deslocar o elemento para a esquerda, direita, superior e inferior. Outro uso de margem surge quando precisamos especificar a distância entre dois elementos próximos. Nós o ilustramos no exemplo acima. Podemos até usar o valor da margem negativa em elementos para criar um efeito de sobreposição. Estes são alguns casos de uso de margem CSS.

Introdução de Padding em CSS

Preenchimento é o espaço entre a borda de um elemento e o conteúdo do elemento. É o espaço dentro de um elemento e não tem controle sobre a área fora do elemento. Usamos a propriedade padding para definir o preenchimento de um elemento. Podemos usar quatro valores, três valores, dois valores e um único valor para representar o preenchimento de um elemento. A representação do preenchimento é semelhante à representação da margem em termos das direções. Podemos ilustrar a seguir.

margin: 20px 20px 20px 20px;

O código acima define o preenchimento de 20px em todas as direções.

Agora vamos demonstrar o uso prático do preenchimento CSS com um exemplo. Usaremos a mesma estrutura HTML acima. Em CSS, selecione div e dê altura e largura de 200px e padding-top de 50px. Selecione as classes individuais e atribua a elas o respectivo valor para a propriedade background-color.

No exemplo abaixo, as duas caixas estão anexadas, ao contrário do exemplo da margem acima. Porém, podemos ver algum espaço acima de cada texto em ambas as caixas. Isso é o que o preenchimento faz. Definir a propriedade padding-top para 20px adicionou um espaço de 50px do texto ao topo da caixa.

Código de exemplo:

<div class="redbox"> Red Box </div>
<div class="bluebox"> Blue Box </div>

div{
 height:200px;
 width: 200px;
 padding-top:50px;
}
.redbox {
 background-color:red;
}

.bluebox {
 background-color:blue;
 color:white;
}

Podemos usar o preenchimento CSS para especificar o espaço entre o conteúdo de um elemento e sua borda. Também podemos usar preenchimento para aumentar o tamanho do elemento. Quando aumentamos o valor de preenchimento, o espaço entre o conteúdo e a borda aumenta. Como resultado, o tamanho do elemento também aumentará, mantendo o tamanho do conteúdo constante.