Box e Fronteiras Propriedades de Cascading Style Sheets (CSS)

Com as propriedades de caixa, você pode posicionar objetos de estilo em qualquer lugar na janela do navegador, a posição de objetos em relação a outros objetos na página, e aplicar as regras de preenchimento e estilo caixa de margem seletivamente para qualquer um ou todos os quatro lados do objeto denominado, tais como esquerda e inferior ou superior, esquerda e direita.

Ao denominar menos do que todos os quatro lados, não se esqueça de adicionar 0 Os valores para os lados que não deve conter valores, ao invés de deixá-los em branco.

largura/altura: Use o largura e altura atributos para definir as dimensões de um objecto ou recipiente, tal como uma tabela, célula da tabela, ou camada. Defina os atributos para auto para forçar o tamanho do objecto a coincidir com o conteúdo do objecto, ou introduzir qualquer valor, positivo ou negativo, em px (píxeis), pc (Picas), pt (pontos), dentro (polegadas), milímetros (milímetros) cm (centímetros) em (EMS), ex (Exs), ou % (percentagem).

#rings {height: largura de auto-: 475px; }

flutuador: Use este estilo para controlar o lado (esquerda, certo, ou Nenhum) Em que outros objetos irá flutuar em torno do objeto denominado.

.saleitems {float: right; }

Claro: Muitas vezes usado em conjunto com o flutuador propriedade, este atributo de estilo controla se outros objetos podem aparecer ao lado do objeto denominado. Variáveis ​​para esse atributo incluem esquerda, certo, ambos, e Nenhum. Por exemplo, quando uma camada é exibida no lado de um objecto com o Claro lado especificado, esse objeto é adiado para a área abaixo da camada.

.notícias {clear: both-}

preenchimento: Esta propriedade é como a margem, apenas com estofamento de aplicar espaço extra entre o objeto denominado e qualquer borda em torno dela, como acontece com uma frase ou uma palavra dentro de uma célula da tabela. Defina o tamanho do preenchimento à esquerda, direita, superior e / ou laterais, inferior usando qualquer valor, positivo ou negativo, na px (píxeis), pc (Picas), pt (pontos), dentro (polegadas), milímetros (milímetros) cm (centímetros) em (EMS), ex (Exs), ou % (percentagem).

Quando tamanhos uniformes são aplicados a todos os quatro lados do objecto denominado, apenas um valor, como em padding: 10px;, precisa ser listado na declaração. Caso contrário, especifique os valores para todos os quatro lados:

.sidebarimage {padding: 10px 0px 10px 0px; }

margem: Use o margem propriedade para adicionar ou subtrair espaço adicional entre a borda da página (ou container pai) eo objeto que está sendo denominado, tais como a área em torno de uma palavra ou camada. Defina o tamanho da margem à esquerda, direita, superior e / ou laterais, inferior usando qualquer valor, positivo ou negativo, na px (píxeis), pc (Picas), pt (pontos), dentro (polegadas), milímetros (milímetros) cm (centímetros) em (EMS), ex (Exs), ou % (percentagem).

Você também pode usar o auto valor em ambos os lados de um objeto de estilo para centralizar o objeto em seu contêiner pai. Quando os valores uniformes são aplicadas a todos os quatro lados, apenas um valor precisa ser listado na declaração. Caso contrário, especifique os valores para todos os quatro lados:

#contact {margin: 0px 0px auto auto}

propriedades de fronteira definir a cor, estilo e largura das bordas ao redor de qualquer objeto denominado. Porque as fronteiras pode ir em todos os quatro lados de um objeto, cada lado pode ter totalmente diferentes atributos de fronteira! Para melhores resultados, como com margens e preenchimento, certifique-se de adicionar um 0 ou Nenhum a qualquer propriedade lado não ser denominado:

.TableCell {border-top: 0px none; border-right: 2px pontilhada # 069-border-bottom: 1px solid # 09C-border-left: 2px pontilhada # 069-}

estilo: Você pode especificar as fronteiras em qualquer um dos seguintes estilos: sólido, pontilhado, tracejadas, duplo, sulco, cume, inserir, início, ou Nenhum. Estilo deve ser especificado em conjunto com a cor e largura.

.TableCell {border: 2px tracejadas # 330066-}

largura: É possível definir opções para a espessura da borda de fino, médio, ou Grosso. Ou, para medições mais precisas, usar-se como em qualquer valor px (píxeis), pc (Picas), pt (pontos), dentro (polegadas), milímetros (milímetros) cm (centímetros) em (EMS), ex (Exs), ou % (Percentagem. Especifique a largura junto com o estilo de cor e borda.

.TableCell {border: 1px pontilhada # 660033-}

cor: Para colorir o atributo borda, especificar o valor hexadecimal da cor desejada e não se esqueça de incluir o símbolo de número (#) Antes de o valor hexadecimal. Também incluem um tipo de estilo e largura para a fronteira.

.TableCell {border: sólida 5px # 003366- }