O tutorial a seguir, de autoria de Paulo de Tarso F. M. e Thiago Ferreira, tem como objetivo explicar pra que servem, como e quando se utilizam os atributos border, padding e margin do CSS.

É um ótimo tutorial, fico feliz que o autor tenha permitido a divulgação do mesmo no meu blog. Com certeza ajudará muita gente. Sem mais delongas, vamos ao tuto:

Objetivo:

Neste tutorial serão abordados os atributos que interferem diretamente na largura e altura dos elementos:

• border
• padding
• margin

Nível de Dificuldade

Básico

Conceitos Necessários

Conhecer o mínimo sobre as propriedades listadas acima.

Iniciando a explicação:

Quando estamos construindo um layout em HTML, muitas vezes nos deparamos com o problema das dimensões dos objetos. Colocamos 100px de largura e na tela aparece maior do que isso. E para ajudar ainda mais, essas diferenças visuais bagunçam o layout inteiro!

Neste tutorial vamos abordar os atributos ligados a esse tipo de situação, explicando cada um de maneira clara e objetiva. Iniciaremos com um exemplo bem simples. Salve os códigos a seguir:

atributos.htm e style.css ou veja o resultado parcial.

Como você pode observar, as divs têm a mesma largura e altura (width e height). Até aqui tudo bem, mas nem sempre o resultado obtido é o que se esperava, principalmente quando se encontram outras propriedades aplicadas ao mesmo elemento.

Alterando nossa formatação…

Para compreender melhor, vamos realizar algumas modificações nas propriedades dos elementos, no arquivo style.css.

Atributo 1: border

Altere as definições da div “exemplo2″, como mostra o código a seguir:

#exemplo2 {
width: 300px;
height: 100px;
background: #090;
border: 10px solid #000;
}

Adicionamos a propriedade border à nossa div “exemplo2″, porém, não alteramos nenhuma outra propriedade. Veja o resultado:

Como podemos observar, a div “exemplo2″ aumentou em 20px a largura e 20px a altura. Isso acontece porque o tamanho da borda foi “somado” à largura e altura da div. A linha border: 10px solid #000; aplicou uma borda de 10px, tipo sólida, de cor preta, em cada um dos 4 lados do elemento. Então, temos:

borda esquerda + width + borda direita = LARGURA TOTAL
borda superior + height + borda inferior = ALTURA TOTAL

Para entender melhor: border

A propriedade border, como o próprio nome já diz e como foi mostrado nos exemplos acima, adiciona uma borda ao elemento. Essa borda pode ser formatada com os seguintes parâmetros:

border-width: determina a espessura da borda.
border-color: determina a cor da borda.
border-style: determina o tipo da borda.

Esta última propriedade pode ter um dos seguintes valores:

none: nenhuma borda
hidden: tem o mesmo efeito que none
dotted: borda pontilhada
dashed: borda tracejada
solid: borda contínua
double: borda dupla
groove: borda entalhada
ridge: borda em ressalto
inset: borda em baixo relevo
outset: borda em alto relevo

Existe também a maneira abreviada de se declarar as propriedades de borda. A sintaxe para esse tipo de declaração é a seguinte:

border: [border-width] [border-style] [border-color];

Essa ordem não é obrigatória, mas é recomendado que se siga sempre uma mesma seqüência para declarar essas propriedades (essa ordem é a mais utilizada).

A imagem abaixo mostra de maneira ampliada o funcionamento do border que acabamos de aplicar em nosso exemplo:

Observe na imagem acima que a div recebeu uma borda preta. Esse é o efeito do border. Caso essa propriedade seja removida, esse será o resultado:

Atributo 2: padding

Agora, altere a formatação da div “exemplo1” da seguinte maneira:

#exemplo1 {
width: 300px;
height: 100px;
background: #c00;
padding: 10px;
}

Adicionamos a propriedade padding à nossa div “exemplo1″. Veja a ação dessa alteração:

Observe que a div “exemplo1” aumentou em 20px a largura e 20px a altura. Isso acontece porque o tamanho do padding aplicado foi “somado” à largura e altura da div, da mesma forma no caso anterior, onde a borda foi adicionada aos resultados. A linha padding: 10px; aplicou uma margem interna (distância entre a borda e o conteúdo do elemento) nos 4 lados. Então, temos:

padding esquerda + width + padding direita = LARGURA TOTAL
padding superior + height + padding inferior = ALTURA TOTAL

Para entender melhor: padding

A propriedade padding pode ser associada à idéia de uma margem interna de algum elemento. Essa margem é invisível, ou seja, ela apenas determina uma distância dos limites especificados para largura (width) e altura (height) de um elemento. A imagem abaixo mostra de maneira ampliada o funcionamento do padding que acabamos de aplicar em nosso exemplo.

Observe na imagem acima que o conteúdo da div está a uma certa distância das extremidades, delimitadas pela cor vermelha. Esse é o efeito do padding. Caso essa propriedade seja removida, esse será o resultado:

Atributo 3: margin

De volta na formatação da div “exemplo2“, altere as propriedades assim:

#exemplo2 {
width: 300px;
height: 100px;
background: #090;
border: 10px solid #000;
margin: 10px;
}

Além da propriedade border adicionada anteriormente, foi adicionado mais um atributo: margin. Veja a ação dessa propriedade:

Observe que a div “exemplo2” se afastou 10px da div “exemplo1” e também 10px a partir do lado esquerdo. Isso acontece porque o tamanho do margin aplicado foi “somado” à largura e altura da div, da mesma forma nos casos anteriores. A linha margin: 10px; aplicou uma margem externa (distância a partir da borda do elemento) nos 4 lados. Então, temos:

margin esquerda + padding esquerda + width + padding direita + margin direita = LARGURA TOTAL
 
margin superior + padding superior + height + padding inferior + margin inferior = ALTURA TOTAL

Para entender melhor: margin

A propriedade margin pode ser definida como uma margem externa de algum elemento. Essa margem também é invisível, ou seja, ela apenas determina uma distância a partir da borda do elemento. A imagem abaixo mostra de maneira ampliada o funcionamento do margin que acabamos de aplicar em nosso exemplo.

Observe na imagem acima que a div está a uma certa distância dos elementos vizinhos. Esse é o efeito do margin. Caso essa propriedade seja removida, esse será o resultado:

Considerações finais:

Para exemplificar tudo isso que foi explicado acima, temos essa imagem:

É importante ressaltar que não é obrigatório definirmos estas propriedades para nossos elementos. Mas caso haja a necessidade de se especificar um valor diferente para cada elemento (por exemplo, poderia definir que uma borda superior seja azul e as demais verdes) temos as seguintes regras, que são aplicáveis à todos os três elementos – border, padding e margin:

border: 10px;

Define que a borda superior, direita, inferior e esquerda terão 10px de espessura (ou seja, as 4 bordas).

border: 10px 0 5px 15px;

Define que a borda superior terá 10px, a borda direita terá 0px (não tem borda), a borda inferior terá 5px e a borda esquerda terá 15px. Analise sempre no sentido horário, começando pela parte superior.

border-top: 10px;

Define que a borda superior terá 10px de espessura.

border-right: 0;

Define que a borda direita terá 0px.
Perceba que não é necessário definir a unidade de medida (“px”, por exemplo) quando um valor é zero.

border-bottom: 5px;

Define que a borda inferior terá 5px.

border-left: 15px;

Define que a borda esquerda terá 15px.

Nos exemplos acima foi citado a propriedade border, mas como já mencionado, essas regras são aplicáveis a qualquer um dos atributos mostrados neste tutorial (border, padding e margin).

Detalhe muito importante

Para que essas propriedades sejam visualizadas corretamente em qualquer browser, é necessário ter um Doctype aplicado no documento. Caso contrário, cada browser interpretará as propriedades de acordo com sua própria renderização, o que gera muita “quebra de layouts”. Portanto, para evitar que sua página seja visualizada de maneira incorreta em um browser, lembre-se de, além de testar a página em todos os browsers possíveis, declare o Doctype.

Créditos:

Este tutorial é uma parceria entre Paulo de Tarso F. M. e Thiago Ferreira.

Compartilhe!