mozilla

Caixas

Esta página descreve como você pode usar as CSS para controlar o espaço que um elemento ocupa quando é exibido.

Em seu documento de amostra, você muda o espaçamento e adiciona regras decorativas.

Informação: Caixas

Quando seu navegador exibe um elemento, o elemento ocupa um espaço. Existem quatro partes do espaço que ele ocupa.

No meio, está o espaço que o elemento precisa para exibir seu conteúdo. Em torno disso, está o enchimento. Em torno disso, está a borda. Em torno disso, está a margem.

margin

border

padding

element

A paleta cinza mostra partes da disposição.

 

 

 

element

Isto é o que você vê em seu navegador.

O enchimento, a borda e a margem podem ter diferentes tamanhos no topo, na direita, em baixo e na esquerda do elemento. Qualquer ou todos estes tamanhos podem ser zero.

O enchimento é sempre da mesma cor do fundo do elemento. Então quando você configura a cor de fundo, você vê a cor aplicada ao próprio elemento e ao seu enchimento. A margem é sempre transparente.

margin

border

padding

element

O elemento tem um fundo verde.

 

 

 

element

É isto que você vê no seu navegador.

Bordas

Você pode usar bordas para decorar elementos com linhas ou caixas.

Para especificar a mesma borda em torno de todo o elemento, use a propriedade border. Especifique a largura (usualmente em pixels para exibir na tela), o estilo, e a cor.

Os estilos são:

solid
dotted
dashed
double
inset
outset
ridge
groove

Você pode também configurar o estilo para none ou hidden para remover a borda explicitamente, ou configurar a cor para transparent para fazer a borda invisível sem mudar a disposição.

Para especificar bordas em um lado de cada vez, use as propriedades: border-top, border-right, border-bottom, border-left. Você pode usar isto para especificar uma borda em somente um lado, ou diferentes bordas em diferentes lados.

Exemplos
Esta regra configura a cor de fundo e a borda do topo dos elementos do cabeçalho:
h3 {
  border-top: 4px solid #7c7; /* mid green */
  background-color: #efe;     /* pale green */
  color: #050;                /* dark green */
  }

O resultado deve ser como este:

Cabeçalho elegante


Esta regra faz as imagens fáceis de ver dando-as uma borda com um cinza-médio em toda a volta:

img {border: 2px solid #ccc;}

O resultado deve ser como este:

Imagem: Image:Blue-rule.png

Margens e enchimento

Use margens e enchimento para ajustar a posição dos elementos e para criar espaços ao redor deles.

Use a propriedade margin ou a propriedade padding para configurar a largura da margem ou do enchimento respectivamente.

Se você especificar uma largura, isto se aplicará em torno de todo o elemento (topo, direita, baixo e esquerda).

Se você especificar duas larguras, a primeira se aplicará ao topo e à baixo, e a segunda à direita e à esquerda.

Você pode especificar todas as quatro larguras na ordem: topo, direita, baixo, esquerda.

Exemplo
Esta regra diferencia parágrafos com a classe remark dando-os uma borda vermelha em toda a sua volta.

O Enchimento em toda a volta separa um pouco a borda do texto.

Uma margem esquerda identifica o parágrafo relativo ao resto do texto:

p.remark {
  border: 2px solid red;
  padding: 4px;
  margin-left: 24px;
  }

O resultado deve ser como este:

Aqui está um parágrafo normal.

Aqui está um com observação.

Mais detalhes
Quando você usa margens e enchimento para ajustar o modo como os elementos são exibidos, suas regras de estilo interagem com o padrão dos navegadores de maneiras que podem ser complexas.

Navegadores diferentes exibem os elementos diferentemente. Os resultados podem ser similares antes de sua folha de estilo mudar coisas. Algumas vezes isto pode fazer sua folha de estilo dar resultados surpreendedores.

Para ter o resultado que você precisa, você pode ter que mudar a marcação do seu documento. A próxima página deste tutorial tem mais informações sobre isto.

Para informações detalhas sobre enchimento, margens e bordas, veja Box model em CSS Specification.

Ação: Adicionando bordas

Edite seu arquivo CSS. Adicione esta regra para desenhar uma linha até o fim da página sobre cada cabeçalho:

h3 {border-top: 1px solid gray;}

Se você pegou o desafio na página anterior, modifique a regra que você criou, se não, adicione esta nova regra para adicionar um espaço em baixo de cada item da lista:

li {
  list-style: lower-roman;
  margin-bottom: 8px;
  }

Atualize seu navegador para ver o resultado:

(A) Os oceanos

  • Ártico
  • Atlântico
  • Pacífico
  • Índico
  • Antártico

(B) Parágrafos numerados

1: Lorem ipsum

2: Dolor sit

3: Amet consectetuer

4: Magna aliquam

5: Autem veleum

Desafio
Adicione uma regra à sua folha de estilo, fazendo um borda larga em toda a volta dos oceanos em uma cor que te lembre o mar — algo como isto:

(A) Os oceanos

  • Ártico
  • Atlântico
  • Pacífico
  • Índico
  • Antártico

(B) Parágrafos numerados

. . .

(Não é necessário fazer exatamente com a largura e a cor que usadas aqui.)

O que vem depois

Se você teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor contribua nesta página de Discussão.

Especificando margens e enchimento, você modificou a disposição do seu documento. Na próxima página você poderá mudar a disposição do seu documento de outras maneiras: Disposição

Etiquetas do documento e colaboradores

Etiquetas: 
Contributors to this page: fscholz, Verruckt, teoli, Leandro Mercês Xavier
Última atualização por: fscholz,