path: root/files/ca/web/guide/css/inici_en_css/caixes/index.html

---
title: Caixes
slug: Web/Guide/CSS/Inici_en_CSS/Caixes
tags:
  - Basic
  - Beginner
  - CSS
  - CSS Borders
  - CSS Margin
  - CSS Padding
  - 'CSS:Getting_Started'
  - NeedsBeginnerUpdate
  - NeedsUpdate
  - Web
translation_of: Learn/CSS/Building_blocks
---
<p>{{ CSSTutorialTOC() }}</p>

<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Lists", "Llistes") }}Aquesta és la 11th secció del tutorial <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS Getting Started</a> descriu com podeu utilitzar CSS per controlar l'espai que ocupa un element quan es mostra. En el document d'exemple, canviareu l'espaiat i afegireu regles decoratives.</p>

<h2 class="clearLeft" id="Informació_Caixes">Informació: Caixes</h2>

<p>Quan el navegador mostra un element, l'element ocupa espai. Hi ha quatre parts en l'espai que ocupa.</p>

<p>Al mig, és l'espai que l'<em>element</em> necessita per mostrar el seu contingut. Al voltant d'això, hi ha un <em>padding (farciment)</em>. Al voltant d'això, hi ha un <em>border (vora)</em>. Al voltant d'això, hi ha un <em>margin (marge)</em> que separa l'element d'altres elements.</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 (marge)</p>

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

    <div style="background-color: #fff; padding: 0px 2em 2em 2em; border: 4px solid #fd9;">
    <p style="text-align: center;">padding (farciment)</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><span class="short_text" id="result_box" lang="ca"><span>El gris</span> <span>pàl·lid</span> <span>mostra</span> <span>parts</span> <span>de la disposició.</span></span></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>Això és el que es veu en el vostre navegador.</em></p>
   </td>
  </tr>
 </tbody>
</table>

<p>El farcit, vora i marge poden tenir diferents mides en la part superior, dret, inferior i esquerra de l'element. Qualsevol o totes aquestes mides poden ser zero.</p>

<h3 id="Acolorir">Acolorir</h3>

<p>El farcit és sempre del mateix color que el fons de l'element. Així que quan s'estableix el color de fons, es veu el color aplicat a l'element en si i el seu farcit. El marge és sempre transparent.</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><span class="short_text" id="result_box" lang="ca"><span>L'element</span> <span>té</span> <span>un fons</span> <span>verd.</span></span></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>Això és el que es veu en el vostre navegador.</em></p>
   </td>
  </tr>
 </tbody>
</table>

<h3 id="Vores">Vores</h3>

<p>Podeu utilitzar les vores per decorar elements amb línies o caixes.</p>

<p>Per especificar la mateixa vora a tot al voltant d'un element, utilitzeu la propietat {{ cssxref("border") }}. Especificar l'ample (en píxels en general per a la seva visualització en una pantalla), l'estil i el color.</p>

<p>Els estils són:</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>També podeu establir l'estil a <code>none</code> o <code>hidden</code> per eliminar de forma explícita la vora, o establir el color a transparent per fer la vora invisible sense canviar el disseny.</p>

<p>Especificar vores a un costat alhora, utilitzeu les propietats: {{ cssxref("border-top") }}, {{ cssxref("border-right") }}, {{cssxref("border-bottom")}}, {{cssxref("border-left")}}. Podeu utilitzar aquests per especificar una vora en un sol costat, o diferentes vores en diferents costats.</p>

<div class="tuto_example">
<div class="tuto_type">Exemple</div>

<p>Aquesta regla estableix el color de fons i la vora de la part superior dels elements d'encapçalament:</p>

<pre class="brush:css">h3 {
  border-top: 4px solid #7c7; /* mid green */
  background-color: #efe;     /* pale green */
  color: #050;                /* dark green */
  }
</pre>

<p><span class="short_text" id="result_box" lang="ca"><span>El resultat</span> <span>és el</span> <span>següent</span><span>:</span></span></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;">Stylish heading</p>
   </td>
  </tr>
 </tbody>
</table>

<p>Aquesta regla fa que les imatges siguin més fàcils de veure, donant-los una vora gris mig en tot:</p>

<pre class="brush:css">img {border: 2px solid #ccc;}
</pre>

<p><span class="short_text" id="result_box" lang="ca"><span>El resultat</span> <span>és el</span> <span>següent</span><span>:</span></span></p>

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

<h3 id="Marges_i_farciment">Marges i farciment</h3>

<p>Utilitzeu marges i farciment per ajustar les posicions dels elements i crear l'espai que els envolta.</p>

<p>Utilitzeu la propietat {{ cssxref("margin") }} o la propietat {{ cssxref("padding") }} per establir els amples dels marges o de farciment, respectivament.</p>

<p>Si s'especifica una amplada, s'aplica al voltant de tot l'element (a dalt, dreta, a sota i a l'esquerra).</p>

<p>Si s'especifica dos amples, la primera s'aplica a la part superior i inferior, la segona a la dreta i l'esquerra.</p>

<p>Podeu definir els quatre amplades en l'ordre: dalt, dreta, a sota, a l'esquerra.</p>

<div class="tuto_example">
<div class="tuto_type">Exemple</div>

<p>Aquesta regla distingeix els paràgrafs amb la classe <code>remark</code>, donant-los una vora vermella al seu voltant.</p>

<p>El farciment al seu voltant separa la vora del text una mica.</p>

<p>Un marge esquerre sagna el paràgraf en relació amb la resta del text:</p>

<pre class="brush:css">p.remark {
  border: 2px solid red;
  padding: 4px;
  margin-left: 24px;
  }
</pre>

<p><span class="short_text" id="result_box" lang="ca"><span>El resultat</span> <span>és el</span> <span>següent</span><span>:</span></span></p>

<table>
 <tbody>
  <tr>
   <td>
    <p>Here is a normal paragraph.</p>

    <p style="border: 2px solid red; padding: 4px 6em 4px 4px; margin: 0px 0px 0px 24px;">Here is a remark.</p>
   </td>
  </tr>
 </tbody>
</table>
</div>

<div class="tuto_details">
<div class="tuto_type">Més detalls</div>

<p>Quan s'utilitzan marges i farcit per ajustar la forma en què els elements es disposen, les seves regles d'estil interactuen amb els valors per defecte del navegador en formes que poden ser complexes.</p>

<p>Els diferents navegadors posen elements de manera diferent. Els resultats podrien ser similar fins que la vostre fulla d'estil canvia les coses. A vegades això pot fer que les vostres fulles d'estil donin resultats sorprenents.</p>

<p>Per obtenir el resultat desitjat, és possible que hàgiu de canviar el marcat del document. La pàgina següent d'aquest tutorial teniu més informació sobre això.</p>

<p>Per a més informació sobre el farciment, marges i vores, vegeu la pàgina de referència <a href="/en-US/docs/Web/CSS/box_model" title="en-US/docs/Web/Guide/CSS/box model"><span class="external">Model de caixa</span></a>.</p>
</div>

<h2 id="Acció_Afegir_vores">Acció: Afegir vores</h2>

<p>Editeu l'arxiu CSS, <code>style2.css</code>. Afegiu aquesta regla per dibuixar una línia a través de la pàgina sobre cada capçalera:</p>

<pre class="brush:css">h3 {border-top: 1px solid gray;}
</pre>

<p>Si vau prendre el repte de l'última pàgina, modifiqueu la regla que heu creat, en cas contrari afegiu aquesta nova regla, la d'afegir un espai sota cada element de la llista:</p>

<pre class="brush:css">li {
  list-style: lower-roman;
  margin-bottom: 8px;
  }
</pre>

<p>Actualitzeu el navegador per veure el resultat:</p>

<table style="background-color: white; border: 2px outset #3366bb; padding: 1em;">
 <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) The oceans</p>

    <ul style="">
     <li style="margin-bottom: 8px;">Arctic</li>
     <li style="margin-bottom: 8px;">Atlantic</li>
     <li style="margin-bottom: 8px;">Pacific</li>
     <li style="margin-bottom: 8px;">Indian</li>
     <li style="margin-bottom: 8px;">Southern</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) Numbered paragraphs</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>

<div class="tuto_example">
<div class="tuto_type">Repte</div>

<p>Afegiu una regla a la fulla d'estils, fent una vora àmpla al voltant dels oceans en un color que recordi al mar, alguna cosa com això:</p>

<table style="background-color: white; border: 2px outset #3366bb; padding: 1em;">
 <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) The oceans</p>

    <div style="border: 12px solid #69b; padding-left: 1em;">
    <ul style="">
     <li style="margin-bottom: 8px;">Arctic</li>
     <li style="margin-bottom: 8px;">Atlantic</li>
     <li style="margin-bottom: 8px;">Pacific</li>
     <li style="margin-bottom: 8px;">Indian</li>
     <li style="margin-bottom: 8px;">Southern</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) Numbered paragraphs</p>

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

<p> </p>

<p>(No hi ha necessitat perquè coincideixi amb l'amplada i el color que es veu aquí exactament.)</p>
</div>

<p><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Boxes" title="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Boxes">Veure la solució per el repte.</a></p>

<h2 id="I_ara_què">I ara què?</h2>

<p>{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Layout", "Disseny") }}En definir marges i farcit, heu modificat el disseny del document. A la pàgina següent es canvia el <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Layout">disseny</a> del vostre document d'altres maneres.</p>