path: root/files/pt-pt/web/css/como_começar/caixas/index.html

---
title: Caixas
slug: Web/CSS/Como_começar/Caixas
tags:
  - 'CSS:Como_começar'
translation_of: Learn/CSS/Building_blocks
---
<p>{{ PreviousNext("CSS:Como começar:Listas", "CSS:Como começar:Disposição") }}</p>

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

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

<h2 id="Informa.C3.A7.C3.A3o:_Caixas" name="Informa.C3.A7.C3.A3o:_Caixas">Informação: Caixas</h2>

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

<p>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.</p>

<table>
 <tbody>
  <tr>
   <td style="width: 22em;">
    <div style="background-color: #eee; padding: 0px 2em 2em 2em; width: 16em;">
    <p style="text-align: center; margin: 0px;">margin</p>

    <p style="text-align: center; margin: 0px 0px -.75em 0px;">border</p>

    <div style="background-color: #fff; padding: 0px 2em 2em 2em; border: 4px solid #fd9;">
    <p style="text-align: center;">padding</p>

    <div style="background-color: #eee;">
    <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #999;">element</p>
    </div>
    </div>
    </div>

    <p><em>A paleta cinza mostra partes da disposição.</em></p>
   </td>
   <td>
    <div style="background-color: #fff; padding: 0px 2em 2em 2em; width: 16em;">
    <p style="text-align: center; margin: 0px;"> </p>

    <p style="text-align: center; margin: 0px 0px -.75em 0px;"> </p>

    <div style="background-color: #fff; padding: 0px 2em 2em 2em; border: 4px solid #fd9;">
    <p style="text-align: center;"> </p>

    <div style="background-color: #fff;">
    <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #999;">element</p>
    </div>
    </div>
    </div>

    <p><em>Isto é o que você vê em seu navegador.</em></p>
   </td>
  </tr>
 </tbody>
</table>

<p>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.</p>

<p>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.</p>

<table>
 <tbody>
  <tr>
   <td style="width: 22em;">
    <div style="background-color: #eee; padding: 0px 2em 2em 2em; width: 16em;">
    <p style="text-align: center; margin: 0px;">margin</p>

    <p style="text-align: center; margin: 0px 0px -.75em 0px;">border</p>

    <div style="background-color: #efe; padding: 0px 2em 2em 2em; border: 4px solid #fd9;">
    <p style="text-align: center;">padding</p>

    <div style="background-color: #ded;">
    <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #898;">element</p>
    </div>
    </div>
    </div>

    <p><em>O elemento tem um fundo verde.</em></p>
   </td>
   <td>
    <div style="background-color: #fff; padding: 0px 2em 2em 2em; width: 16em;">
    <p style="text-align: center; margin: 0px;"> </p>

    <p style="text-align: center; margin: 0px 0px -.75em 0px;"> </p>

    <div style="background-color: #efe; padding: 0px 2em 2em 2em; border: 4px solid #fd9;">
    <p style="text-align: center;"> </p>

    <div style="background-color: #efe;">
    <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #898;">element</p>
    </div>
    </div>
    </div>

    <p><em>É isto que você vê no seu navegador.</em></p>
   </td>
  </tr>
 </tbody>
</table>

<h3 id="Bordas" name="Bordas">Bordas</h3>

<p>Você pode usar bordas para decorar elementos com linhas ou caixas.</p>

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

<p>Os estilos são:</p>

<table style="margin-left: 2em;">
 <tbody>
  <tr>
   <td style="width: 6em;">
    <div style="border: 2px solid #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>solid</code></div>
   </td>
   <td style="width: 6em;">
    <div style="border: 2px dotted #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>dotted</code></div>
   </td>
   <td style="width: 6em;">
    <div style="border: 2px dashed #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>dashed</code></div>
   </td>
   <td style="width: 6em;">
    <div style="border: 4px double #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>double</code></div>
   </td>
  </tr>
  <tr>
   <td style="width: 6em;">
    <div style="border: 2px inset #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>inset</code></div>
   </td>
   <td style="width: 6em;">
    <div style="border: 2px outset #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>outset</code></div>
   </td>
   <td style="width: 6em;">
    <div style="border: 4px ridge #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>ridge</code></div>
   </td>
   <td style="width: 6em;">
    <div style="border: 4px groove #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>groove</code></div>
   </td>
  </tr>
 </tbody>
</table>

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

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

<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
 <caption>Exemplos</caption>
 <tbody>
  <tr>
   <td>Esta regra configura a cor de fundo e a borda do topo dos elementos do cabeçalho:
    <div style="width: 40em;">
    <pre class="eval">
h3 {
  border-top: 4px solid #7c7; /* mid green */
  background-color: #efe;     /* pale green */
  color: #050;                /* dark green */
  }
</pre>
    </div>

    <p>O resultado deve ser como este:</p>

    <table>
     <tbody>
      <tr>
       <td>
        <p style="font-size: 133%; font-weight: bold; background-color: #efe; border-top: 4px solid #7c7; color: #050; padding-right: 6em;">Cabeçalho elegante</p>
       </td>
      </tr>
     </tbody>
    </table>

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

    <div style="width: 30em;">
    <pre class="eval">
img {border: 2px solid #ccc;}
</pre>
    </div>

    <p>O resultado deve ser como este:</p>

    <table>
     <tbody>
      <tr>
       <td>Imagem:</td>
       <td style="border: 2px solid #ccc;"><img alt="Image:Blue-rule.png" class="internal" src="/@api/deki/files/2528/=Blue-rule.png"></td>
      </tr>
     </tbody>
    </table>
   </td>
  </tr>
 </tbody>
</table>

<h3 id="Margens_e_enchimento" name="Margens_e_enchimento">Margens e enchimento</h3>

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

<p>Use a propriedade <code>margin</code> ou a propriedade <code>padding</code> para configurar a largura da margem ou do enchimento respectivamente.</p>

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

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

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

<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
 <caption>Exemplo</caption>
 <tbody>
  <tr>
   <td>Esta regra diferencia parágrafos com a classe <code>remark</code> dando-os uma borda vermelha em toda a sua volta.
    <p>O Enchimento em toda a volta separa um pouco a borda do texto.</p>

    <p>Uma margem esquerda identifica o parágrafo relativo ao resto do texto:</p>

    <div style="width: 30em;">
    <pre class="eval">
p.remark {
  border: 2px solid red;
  padding: 4px;
  margin-left: 24px;
  }
</pre>
    </div>

    <p>O resultado deve ser como este:</p>

    <table>
     <tbody>
      <tr>
       <td>
        <p>Aqui está um parágrafo normal.</p>

        <p style="border: 2px solid red; padding: 4px 6em 4px 4px; margin: 0px 0px 0px 24px;">Aqui está um com observação.</p>
       </td>
      </tr>
     </tbody>
    </table>
   </td>
  </tr>
 </tbody>
</table>

<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;">
 <caption>Mais detalhes</caption>
 <tbody>
  <tr>
   <td>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.
    <p>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.</p>

    <p>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.</p>

    <p>Para informações detalhas sobre enchimento, margens e bordas, veja <a class="external" href="http://www.w3.org/TR/CSS21/box.html">Box model</a> em CSS Specification.</p>
   </td>
  </tr>
 </tbody>
</table>

<h2 id="A.C3.A7.C3.A3o:_Adicionando_bordas" name="A.C3.A7.C3.A3o:_Adicionando_bordas">Ação: Adicionando bordas</h2>

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

<div style="width: 30em;">
<pre class="eval">h3 {border-top: 1px solid gray;}
</pre>
</div>

<p>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:</p>

<div style="width: 30em;">
<pre class="eval">li {
  list-style: lower-roman;
  margin-bottom: 8px;
  }
</pre>
</div>

<p>Atualize seu navegador para ver o resultado:</p>

<table style="border: 2px outset #36b; padding: 1em; background-color: white;">
 <tbody>
  <tr>
   <td>
    <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) Os oceanos</p>

    <ul style="">
     <li style="margin-bottom: 8px;">Ártico</li>
     <li style="margin-bottom: 8px;">Atlântico</li>
     <li style="margin-bottom: 8px;">Pacífico</li>
     <li style="margin-bottom: 8px;">Índico</li>
     <li style="margin-bottom: 8px;">Antártico</li>
    </ul>

    <p style="font-weight: bold; font-size: 133%; margin-top: 1em; margin-bottom: .3em; padding: .4em 4em .16em 0; border-top: 1px solid gray;">(B) Parágrafos numerados</p>

    <p><strong>1: </strong>Lorem ipsum</p>

    <p><strong>2: </strong>Dolor sit</p>

    <p><strong>3: </strong>Amet consectetuer</p>

    <p><strong>4: </strong>Magna aliquam</p>

    <p><strong>5: </strong>Autem veleum</p>
   </td>
  </tr>
 </tbody>
</table>

<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
 <caption>Desafio</caption>
 <tbody>
  <tr>
   <td>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:
    <table style="border: 2px outset #36b; padding: 1em; background-color: white;">
     <tbody>
      <tr>
       <td>
        <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) Os oceanos</p>

        <div style="border: 12px solid #69b; padding-left: 1em;">
        <ul style="">
         <li style="margin-bottom: 8px;">Ártico</li>
         <li style="margin-bottom: 8px;">Atlântico</li>
         <li style="margin-bottom: 8px;">Pacífico</li>
         <li style="margin-bottom: 8px;">Índico</li>
         <li style="margin-bottom: 8px;">Antártico</li>
        </ul>
        </div>

        <p style="font-weight: bold; font-size: 133%; margin-top: 1em; margin-bottom: .3em; padding: .4em 4em .16em 0; border-top: 1px solid gray;">(B) Parágrafos numerados</p>

        <p><strong>. . .</strong></p>
       </td>
      </tr>
     </tbody>
    </table>

    <p>(Não é necessário fazer exatamente com a largura e a cor que usadas aqui.)</p>
   </td>
  </tr>
 </tbody>
</table>

<h3 id="O_que_vem_depois" name="O_que_vem_depois">O que vem depois</h3>

<p>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 <a href="/Talk:pt/CSS/Como_come%C3%A7ar/Caixas" title="Talk:pt/CSS/Como_começar/Caixas">Discussão</a>.</p>

<p>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: <strong><a href="/pt/CSS/Como_come%C3%A7ar/Disposi%C3%A7%C3%A3o" title="pt/CSS/Como_começar/Disposição">Disposição</a></strong></p>

<p>{{ PreviousNext("CSS:Como começar:Listas", "CSS:Como começar:Disposição") }}</p>