CSS: margin, padding e border

(Elivelto Ebermam)

 

Na confecção do layout de um site, três elementos são muito importantes: margens, espaçamentos e bordas. As margens (propriedade margin) é espaçamento do elemento em relação ao exterior. A propriedade padding define o espaçamento interno em relação ao conteúdo do elemento. Já a propriedade border define as bordas do elemento. Veja:

Note que os espaçamentos ocorrem em quatro direções, e em CSS tem as seguintes nomenclaturas: top (parte superior), bottom (parte inferior), left (lado esquerdo) e right (lado direito).

Propriedade margin

A propriedade margin é responsável por definir as margens do elemento. Há quatro margens: margin-top, margin-bottom, margin-left e margin-right. Veja na imagem abaixo:

Há duas formas de inserir margens usando o CSS: usar a propriedade margin diretamente ou usar suas propriedades derivadas. Para começar, vamos ver um código de uma página web sem o uso de margens:

Disponível em: https://www.w3schools.com/code/tryit.asp?filename=GJ3IIIWK9G1Z

 

Nessa página web há uma div com o identificador “div1” com 200 pixels de largura e altura e de coloração verde. Agora vamos adicionar as margens:

Disponível em: https://www.w3schools.com/code/tryit.asp?filename=GJ3J3X3RAPD4

Note que houve um deslocamento da div por causa das margens. A propriedade margin possui quatro valores (separados por espaço), cada um correspondente a uma margem:

    margin : 50px 50px 50px 50px;

- O primeiro valor corresponde a margem superior.

- O segundo valor corresponde a margem direita.

- O terceiro valor corresponde a margem inferior.

- O quarto valor corresponde a margem direita.

A outra forma de definir é usar propriedades derivadas de margin:

Propriedade	Descrição
margin-top	Margem superior
margin-right	Margem direita
margin-bottom	Margem inferior
margin-left	Margem esquerda

Veja um exemplo:

Disponível em: https://www.w3schools.com/code/tryit.asp?filename=GJ3K3NPRS8HW

 

Nesse exemplo foi adicionado uma margem de 100 pixels a esquerda.

Nos exemplos acima foram usados valores em pixels para as margens. Outra medida absoluta que pode ser usada é “em”. Mas também é possível usar valores relativos, em porcentagem, veja:

Disponível em: https://www.w3schools.com/code/tryit.asp?filename=GJ3KL84H2YX8

 

Centralizando elementos com a propriedade margin

Vimos que podemos definir as margens de uma div, mas e se quisermos centralizar a div? Existe a possibilidade de centralizar a div atribuindo o valor “auto” para a propriedade margin. Esse valor faz com que as margens direita e esquerda fiquem do mesmo tamanho.

Disponível em: https://www.w3schools.com/code/tryit.asp?filename=GJ3PRMX69D61

Propriedade padding

A propriedade padding funciona de forma semelhante a margin, porém o espaçamento é interno:

Há duas formas de definir a propriedade padding:

   padding : 10px 20px 30px 40px;

ou

   padding-top : 10px;

   padding-right : 20px;

   padding-bottom : 30px;

   padding-left : 40px;

 

Vamos aplicar padding em uma div que contém texto dentro dela. Vejam dois exemplos, o primeiro sem padding e o segundo com padding:

Disponível em: https://www.w3schools.com/code/tryit.asp?filename=GJ62X1LNR5DR

Disponível em: https://www.w3schools.com/code/tryit.asp?filename=GJ62QELFSV0J

 

Além de pixel (px), outras medidas podem ser utilizadas como “em” e medidas percentuais (%).

 

Propriedade border

A propriedade border é usada para inserir bordas. Podemos declará-la da seguinte forma:

    border : 1px solid blue;

 

Há três valores para a propriedade border: o primeiro é a espessura da borda, o segundo é o estilo da borda e o terceiro é a cor da borda. Na verdade a propriedade border contém três propriedades embutidas: border-width, border-style e border-color. Cada uma dessas propriedades pode ser definida individualmente também.

Veja um exemplo usando a propriedade border:

Disponível em: https://www.w3schools.com/code/tryit.asp?filename=GJ64X78CV9Z2

 

Propriedade border-width

A propriedade border-width define a espessura da borda. Essa propriedade aceita quatro valores, um para cada borda de cada lado. A propriedade pode ser escrita assim:

 

    Border-width : 1px 2px 3px 4px;

 

Propriedade border-style

A propriedade border-style define os estilos das bordas. Existem valores padrões para essa propriedade:

 

Valor	Descrição
solid	Borda contínua.
dotted	Borda pontilhada.
dashed	Borda serrilhada.

 

Nessa propriedade também podemos definir quatro valores:

   

    Border-style : solid dotted dashed solid;

 

Propriedade border-color

A propriedade border-color define a cor das bordas. Assim como as propriedades anteriores, ela também aceita quatro valores:

 

    border-color : red green blue yellow;

 

Veja um exemplo usando as propriedades descritas acima:

 

Disponível em: https://www.w3schools.com/code/tryit.asp?filename=GJ722GCCDHOG