Logo abaixo se encontram propriedades e valores para caixas. (Eu incluí aqui somente propriedades suportadas atualmente pelo Internet Explorer
e pelo Netscape -- outras propriedades serão acrescentadas na medida em que elas
passem a ser suportadas)
|
Propriedade
|
Descrição
|
Valores
|
Exemplo
|
Propriedades de Caixa e de Margens
|


|
margin-left (não herdado)
|
Ajusta a distância a partir do lado esquerdo da página
|
tamanho (pt, in, cm, px)
|
{ margin-left: 1in }
|


|
margin-right (não herdado)
|
Ajusta a distância a partir do lado direito da página
|
tamanho (pt, in, cm, px)
|
{ margin-right: 1in }
|


|
margin-top (não herdado)
|
Ajusta a distância a partir da parte de baixo do elemento prévio
|
tamanho (pt, in, cm, px)
|
{ margin-top: -20pt }
|


|
margin-bottom (não herdado)
|
Ajusta a distância a partir da parte de cima do próximo elemento
|
tamanho (pt, in, cm, px)
|
{ margin-bottom: 20pt }
|


|
margin (não herdado)
|
Ajustas as margens em todos os quatro lados de um elemento (Se houver somente um valor, ele se aplica a todos os lados; se houver dois ou três, o valor que falta será tomado do lado oposto.)
|
tamanho (pt, in, cm, px) ou porcentagem do tamanho da fonte na ordem: alto, direita, baixo, esquerda
|
{ margin: .5cm .5cm 1cm .5cm }
|


|
padding (não herdado)
|
Ajusta o preenchimento em todos os quatro lados do conteúdo de um elemento (Se houver somente um valor, ele se aplica a todos os lados; se houver dois ou três, o valor que falta será tomado do lado oposto.)
|
tamanho (pt, in, cm, px) ou porcentagem do tamanho da fonte na ordem: alto, direita, baixo, esquerda
|
{ padding: .5cm .5cm 1cm .5cm }
|


|
padding-top (não herdado)
|
Ajusta o preenchimento na parte de cima do conteúdo de um elemento
|
tamanho (pt, in, cm, px) ou porcentagem do tamanho da fonte
|
{ padding-top: 5pt }
|


|
padding-right (não herdado)
|
Ajusta o preenchimento no lado direito do conteúdo de um elemento
|
tamanho (pt, in, cm, px) ou porcentagem do tamanho da fonte
|
{ padding-right: 5pt }
|


|
padding-bottom (não herdado)
|
Ajusta o preenchimento na parte de baixo do conteúdo de um elemento
|
tamanho (pt, in, cm, px) ou porcentagem do tamanho da fonte
|
{ padding-bottom: 5pt }
|


|
padding-left (não herdado)
|
Ajusta o preenchimento no lado esquerdo do conteúdo de um elemento
|
tamanho (pt, in, cm, px) ou porcentagem do tamanho da fonte
|
{ padding-left: 5pt }
|


|
border-top-width (não herdado)
|
Ajusta a largura da borda ao longo da parte de cima de um elemento
|
tamanho (pt, in, cm, px);
thin, medium, thick
|
{ border-top-width: thin }
|


|
border-right-width (não herdado)
|
Ajusta a largura da borda ao longo do lado direito de um elemento
|
tamanho (pt, in, cm, px);
thin, medium, thick
|
{ border-right-width: thin }
|


|
border-bottom-width (não herdado)
|
Ajusta a largura da borda ao longo da parte de baixo de um elemento
|
tamanho (pt, in, cm, px);
thin, medium, thick
|
{ border-bottom-width: thin }
|


|
border-left-width (não herdado)
|
Ajusta a largura da borda ao longo do lado esquerdo de um elemento
|
tamanho (pt, in, cm, px);
thin, medium, thick
|
{ border-left-width: thin }
|


|
border-width (não herdado)
|
Ajusta a largura da borda em cada lado de um elemento na ordem parte de cima, lado direito, parte de baixo, lado esquerdo (Se houver só um valor, ele se aplica a todos os lados; se houver dois ou três, os valores que faltam serão tomados do lado oposto.)
|
tamanho (pt, in, cm, px);
thin, medium, thick
|
{ border-width: thin thin thick thin }
|

|
border-top-color (não herdado)
|
Ajusta a cor da borda ao longo do lado de cima de um elemento
|
nome da cor ou código hex
|
{ border-top-color: green }
|

|
border-right-color (não herdado)
|
Ajusta a cor da borda ao longo do lado direito de um elemento
|
nome da cor ou código hex
|
{ border-right-color: green }
|

|
border-bottom-color (não herdado)
|
Ajusta a cor da borda ao longo do lado de baixo de um elemento
|
nome da cor ou código hex
|
{ border-bottom-color: #00FF00 }
|

|
border-left-color (não herdado)
|
Ajusta a cor da borda ao longo do lado esquerdo de um elemento
|
nome da cor ou código hex
|
{ border-left-color: thin }
|


|
border-color (não herdado)
|
Ajusta a cor da borda em cada lado de um elemento na ordem parte de cima, lado direito, parte de baixo, lado esquerdo (Se houver só um valor, ele se aplica a todos os lados; se houver dois ou três, os valores que faltam serão tomados do lado oposto; note que o Netscape só permite um valor)
|
nome da cor ou código hex
|
{ border-color: green #FFFF00 #00FFFF green } (IE4)
{ border-color: green } (IE4 or Netscape 4)
|

|
border-top-style (não herdado)
|
Ajusta o estilo da borda ao longo do lado de cima de um elemento
|
nome do estilo (none, solid, double, groove, ridge, inset, outset)
|
{ border-top-style: ridge }
|

|
border-right-style (não herdado)
|
Ajusta o estilo da borda ao longo do lado direito de um elemento
|
nome do estilo (none, solid, double, groove, ridge, inset, outset)
|
{ border-right-style: solid }
|

|
border-bottom-style (não herdado)
|
Ajusta o estilo da borda ao longo do lado de baixo de um elemento
|
nome do estilo (none, solid, double, groove, ridge, inset, outset)
|
{ border-bottom-style: groove }
|

|
border-left-style (não herdado)
|
Ajusta o estilo da borda ao longo do lado esquerdo de um elemento
|
nome do estilo (none, solid, double, groove, ridge, inset, outset)
|
{ border-left-style: inset }
|


|
border-style (não herdado)
|
Ajusta o estilo da borda em todos os lados de um elemento
|
nome do estilo (none, solid, double, groove, ridge, inset, outset)
|
{ border-style: outset }
|

|
border-top (não herdado)
|
Ajusta a largura, cor, e estilo da borda ao longo do lado de cima de um elemento
|
largura, cor, e estilo
|
{ border-top: thin green ridge }
|

|
border-right (não herdado)
|
Ajusta a largura, cor, e estilo da borda ao longo do lado direito de um elemento
|
largura, cor, e estilo
|
{ border-right: thin green ridge }
|

|
border-bottom (não herdado)
|
Ajusta a largura, cor, e estilo da borda ao longo do lado de baixo de um elemento
|
largura, cor, e estilo
|
{ border-bottom: thin green ridge }
|

|
border-left (não herdado)
|
Ajusta a largura, cor, e estilo da borda ao longo do lado esquerdo de um elemento
|
largura, cor, e estilo
|
{ border-left: thin green ridge }
|

|
border (não herdado)
|
Ajusta a largura, cor, e estilo da borda em todos os lados de um elemento
|
largura, cor, e estilo
|
{ border: thin green ridge }
|


|
float (não herdado)
|
Faz com que o elemento flutue para um lado e outro do texto e o envolva. (Usado nos elementos DIV e SPAN.)
|
left, right, ou none
|
{ float: left }
|


|
clear (não herdado)
|
Especifica se o elemento pode ter elementos flutuando à sua volta -- faz com que o elemento se posicione por baixo de qualquer elemento que esteja flutuando no lado especificado.
|
left, right, ou both
|
{ clear: left }
|