MDN may have intermittent access issues April 18 13:00 - April 19 01:00 UTC. See whistlepig.mozilla.org for all notifications.

mozilla
Os seus resultados da pesquisa

    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: Verruckt, Leandro Mercês Xavier, fscholz, teoli
    Última atualização por: fscholz,