---
title: margin
slug: Web/CSS/margin
tags:
  - CSS
  - CSS Property
  - Reference
translation_of: Web/CSS/margin
translation_of_original: Web/CSS/margin-new
---
<div>{{CSSRef}}</div>

<p>La propietat <a href="/en/CSS">CSS</a> <strong><code>margin</code></strong> estableix l'àrea del marge en els quatre costats d'un element. És una abreviatura que estableix tots els marges individuals alhora: {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} i {{cssxref("margin-left")}}.</p>

<pre class="brush:css no-line-numbers">/* Apply to all four sides */
margin: 1em;

/* vertical | horizontal */
margin: 5% auto;

/* top | horizontal | bottom */
margin: 1em auto 2em;

/* top | right | bottom | left */
margin: 2px 1em 0 auto;

/* Global values */
margin: inherit;
margin: initial;
margin: unset;
</pre>

<div class="hidden" id="margin">
<pre class="brush: html">&lt;div class="grid"&gt;
  &lt;div class="col"&gt;
    &lt;div class="cell"&gt;
      &lt;div class="m m0"&gt;margin: 0&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="cell"&gt;
      &lt;div class="m m1"&gt;margin: 1em&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="cell"&gt;
      &lt;div class="m m2"&gt;margin: 5% auto&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="cell"&gt;
      &lt;div class="m m3"&gt;margin: 1em auto 2em&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="cell"&gt;
      &lt;div class="m m4"&gt;margin: 5px 1em 0 auto&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="note"&gt;All the boxes above have the same width of 50%&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>

<pre class="brush: css">html,body {
  height: 100%;
  box-sizing: border-box;
}

.grid {
  width: 100%;
  height: 100%;
  display: flex;
  background: #EEE;
  font: 1em monospace;
}

.col {
  display: flex;
  flex: 1 auto;
  flex-direction: column;
}

.cell {
  box-sizing: border-box;
  margin: .5em;
  padding: 0;
  background-color: #FFF;
  overflow: hidden;
  text-align: center;
}

.note {
  background: #fff3d4;
  padding: 1em;
  margin: .5em;
  font: .8em sans-serif;
  text-align: center;
  flex: none;
}

.m {
  display: block;
  width: 50%;
  text-align: left;
  background: #E4F0F5;
  padding: .5em;
  border: 1px solid;
}

.m0 { margin: 0; }
.m1 { margin: 1em; }
.m2 { margin: 5% auto; }
.m3 { margin: 1em auto 2em; }
.m4 { margin: 5px 1em 0 auto; }</pre>
</div>

<p>{{EmbedLiveSample("margin", "100%", 400, "", "", "example-outcome-frame")}}</p>

<p>{{cssinfo}}</p>

<h2 id="Sintaxi">Sintaxi</h2>

<p>La propietat <code>margin</code> es pot especificar usant un, dos, tres o quatre valors. Cada valor és un <code><a href="#&lt;length>">&lt;length&gt;</a></code>, un <code><a href="#&lt;percentage>">&lt;percentage&gt;</a></code>, o la paraula clau <code><a href="#auto">auto</a></code>. Cada valor pot ser positiu, zero o negatiu.</p>

<ul>
 <li>Quan s'especifica <strong>un</strong> valor, s'aplica el mateix marge als <strong>quatre costats</strong>.</li>
 <li>Quan s'especifiquen <strong>dos</strong> valors, el primer marge s'aplica a la part <strong>superior i inferior</strong>, el segon a l'<strong>esquerra i a la dreta</strong>.</li>
 <li>Quan s'especifiquen <strong>tres</strong> valors, el primer marge s'aplica a la part <strong>superior</strong>, el segon a l'<strong>esquerra i a la dreta</strong>, el tercer a la part <strong>inferior</strong>.</li>
 <li>Quan s'especifiquen <strong>quatre</strong> valors, els marges s'apliquen a la part <strong>superior, dreta, inferior </strong>i<strong> esquerra</strong> en aquest ordre (en el sentit de les agulles del rellotge).</li>
</ul>

<h3 id="Valors">Valors</h3>

<dl>
 <dt><strong>{{cssxref("length")}}</strong></dt>
 <dd>La grandària del marge com a valor fix.</dd>
 <dt>{{cssxref("percentage")}}</dt>
 <dd>La grandària del marge com a percentatge, en relació amb l'<em>amplada</em> del bloc contenidor.</dd>
 <dt><code>auto</code></dt>
 <dd>El navegador selecciona un marge adequat per utilitzar-lo. Per exemple, en alguns casos aquest valor es pot utilitzar per centrar un element.</dd>
</dl>

<h3 id="Sintaxi_formal">Sintaxi formal</h3>

{{csssyntax}}

<h2 id="Exemples">Exemples</h2>

<h3 id="Exemple_senzill">Exemple senzill</h3>

<h4 id="HTML">HTML</h4>

<pre class="brush: html">&lt;div class="center"&gt;This element is centered.&lt;/div&gt;

&lt;div class="outside"&gt;This element is positioned outside of its container.&lt;/div&gt;</pre>

<h4 id="CSS">CSS</h4>

<pre class="brush: css; highlight:[2,8]">.center {
  margin: auto;
  background: lime;
  width: 66%;
}

.outside {
  margin: 3rem 0 0 -3rem;
  background: cyan;
  width: 66%;
}</pre>

<p>{{ EmbedLiveSample('Simple_example','100%',120) }}</p>

<h3 id="Més_exemples"><span class="short_text" id="result_box" lang="ca"><span>Més exemples</span></span></h3>

<pre class="brush: css">margin: 5%;                 /* all sides: 5% margin */

margin: 10px;               /* all sides: 10px margin */

margin: 1.6em 20px;         /* top and bottom: 1.6em margin */
                            /* left and right: 20px margin  */

margin: 10px 3% 1em;        /* top:            10px margin */
                            /* left and right: 3% margin   */
                            /* bottom:         1em margin  */

margin: 10px 3px 30px 5px;  /* top:    10px margin */
                            /* right:  3px margin  */
                            /* bottom: 30px margin */
                            /* left:   5px margin  */

margin: 2em auto;           /* top and bottom: 2em margin   */
                            /* box is horizontally centered */

margin: auto;               /* top and bottom: 0 margin     */
                            /* box is horizontally centered */
</pre>

<h2 id="Notes">Notes</h2>

<h3 id="Centrat_horitzontal"><span id="result_box" lang="ca"><span>Centrat horitzontal</span></span></h3>

<p>Per centrar alguna cosa horitzontalment en els navegadors moderns, podeu utilitzar <code><a href="/en-US/docs/Web/CSS/display">display</a>: flex; <a href="/en-US/docs/Web/CSS/justify-content">justify-content</a>: center;</code> .</p>

<p>Tanmateix, en navegadors antics com IE8-9 que no admeten el disseny de flexbox, aquests no estan disponibles. Per centrar un element dins del seu pare, utilitzeu <code>margin: 0 auto;</code> .</p>

<h3 id="Col.lapse_del_marge">Col.lapse del marge</h3>

<p>Els marges superior i inferior d'elements solen col·lapsar-se en un únic marge igual al major dels dos marges. Consulteu <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Dominar el col.lapse del marge</a> per obtenir més informació.</p>

<h2 id="Especificacions">Especificacions</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificació</th>
   <th scope="col">Estat</th>
   <th scope="col">Comentari</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('CSS3 Box', '#margin', 'margin') }}</td>
   <td>{{ Spec2('CSS3 Box') }}</td>
   <td><span class="short_text" id="result_box" lang="ca"><span>No hi ha canvis significatius</span></span> .</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'margin') }}</td>
   <td>{{ Spec2('CSS3 Transitions') }}</td>
   <td>Defineix <code>margin</code> com animable.</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS2.1', 'box.html#margin-properties', 'margin') }}</td>
   <td>{{ Spec2('CSS2.1') }}</td>
   <td><span class="short_text" id="result_box" lang="ca"><span>Elimina el seu efecte en elements en línia</span></span> .</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS1', '#margin', 'margin') }}</td>
   <td>{{ Spec2('CSS1') }}</td>
   <td>Definició iniciaI.</td>
  </tr>
 </tbody>
</table>

<h2 id="Navegadors_compatibles">Navegadors compatibles</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Descripció</th>
   <th>Chrome</th>
   <th>Edge</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Suport bàsic</td>
   <td>1.0</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{ CompatGeckoDesktop("1") }}</td>
   <td>3.0</td>
   <td>3.5</td>
   <td>1.0 (85)</td>
  </tr>
  <tr>
   <td><code>auto</code> value</td>
   <td>1.0</td>
   <td>{{CompatUnknown}}</td>
   <td>{{ CompatGeckoDesktop("1") }}</td>
   <td>6.0 (strict mode)</td>
   <td>3.5</td>
   <td>1.0 (85)</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Descripció</th>
   <th>Android</th>
   <th>Edge</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Suport bàsic</td>
   <td>1.0</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{ CompatGeckoMobile("1") }}</td>
   <td>6.0</td>
   <td>6.0</td>
   <td>1.0</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="Vegeu_també">Vegeu també</h2>

<ul>
 <li><a class="internal" href="/en/CSS/box_model" title="en/CSS/box model">Model de caixa CSS</a></li>
 <li><a class="internal" href="/en/CSS/margin_collapsing" title="en/CSS/margin collapsing">Col.lapse del marge</a></li>
</ul>