Ir para o conteúdo

Propriedades: Border - Padding - Margin


Criado por Giovani, Out 26 2010 20:23

Não há respostas para este tópico
  • Por favor, faça o login para responder

#1 Giovani

Giovani
  • Giovani
  • Colaborador
  • 44 Revisões

Revisou 26 outubro 2010 - 20:23

Propriedades: border - padding - margin

Objetivo:
Neste tutorial serão abordados as propriedades 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 CSS de uma forma geral.

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 as propriedades ligadas a esse tipo de situação, explicando cada uma de maneira clara e objetiva. Iniciaremos com um exemplo bem simples. Salve os códigos a seguir:

:seta: propriedades.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Atributos</title>
		<link href="style.css" rel="stylesheet" type="text/css" />
	</head>
	<body>
		<div id="exemplo1">Texto da div "<em>exemplo1</em>"</div>
		<div id="exemplo2">Texto da div "<em>exemplo2</em>"</div>
	</body>
</html>
:seta: style.css
div {
	font: 14px Verdana, Arial, Sans-Serif;
	font-weight: bold;
	color: #fff;
}
#exemplo1 {
	width: 300px;
	height: 100px;
	background: #c00;
}
#exemplo2 {
	width: 300px;
	height: 100px;
	background: #090;
}
:seta: 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.

:seta: Propriedade 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:

Clique aqui
Imagem postada

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.

Imagem postada

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:

Imagem postada


:seta: Propriedade 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:

Clique aqui
Imagem postada


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.

Imagem postada

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:

Imagem postada


:seta: Propriedade 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:

Clique aqui
Imagem postada


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.

Imagem postada

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:

Imagem postada


Considerações finais:

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

Imagem postada

É 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.
:seta: 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.

Outras referências:
DTD - Document Type Definition
Não se esqueça do doctype em seu documento

----
Autor: Paulo de Tarso F. M.




1 usuário(s) está(ão) lendo este código

1 membro(s), 0 visitante(s) e 0 membros anônimo(s)