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.
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:
img {border: 2px solid #ccc;}
O resultado deve ser como este:
|
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.
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:
|
| 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
(B) Parágrafos numerados 1: Lorem ipsum 2: Dolor sit 3: Amet consectetuer 4: Magna aliquam 5: Autem veleum |
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:
(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