---
title: margin
slug: Web/CSS/Margin
translation_of: Web/CSS/margin
translation_of_original: Web/CSS/margin-new
---
<p>{{ CSSRef() }}</p>

<h2 id="Summary" name="Summary">Podsumowanie</h2>

<p>Własność <strong><code>margin</code></strong> określa marginesy elementu. Jest ona również sposobem na ustawienie wszystkich marginesów jednocześnie. Negatywne wartosci są dozwolone.</p>

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

<h2 id="Syntax" name="Syntax">Składnia</h2>

<pre class="eval">margin: <a href="/pl/CSS/lenght" title="pl/CSS/lenght">&lt;length&gt;</a> {1,4} | <a href="/pl/css/percentage" title="pl/css/percentage">&lt;percentage&gt;</a> {1,4} | <a href="/pl/css/inherit" title="pl/css/inherit">inherit</a> | <a href="/pl/css/auto" title="pl/css/auto">auto</a>;
</pre>

<h3 id="Values" name="Values">Wartości</h3>

<dl>
 <dt>&lt;length&gt;</dt>
 <dd>przyjmuje konkretną odległość.</dd>
 <dt>&lt;percentage&gt;</dt>
 <dd>procentowa wartość <strong>szerokości</strong> zawierającego bloku</dd>
 <dt>auto</dt>
 <dd>przeglądarka obliczy i wybierze margines dla określonego elementu</dd>
</dl>

<p>Jeśli podano:</p>

<ul>
 <li>jedną wartosć, zostaje ona przypisana dla wszystkich stro.</li>
 <li>dwie wartości, pierwsza odnosi się do: góra i dół, a druga do: prawo i lewo.</li>
 <li>trzy wartości, pierwsza odnosi się do góra, druga do: prawo i lewo, a trzecia do: dół.</li>
 <li>cztery wartości, kolejno odnoszą się do: góra, prawo, dół, lewo;</li>
</ul>

<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2>

<pre>  .content {
    margin: 5%;  /* wszystkie strony margines 5% */
  }

  .sidebox {
    margin: 10px;  /* wszystkie strony margines 10px */
  }

  .rightbox {
    margin: 10px 20px;  /*  górny i dolny margines 10px */
  }                     /*  lewy i prawy margines 20px */


  .leftbox {               /*  górny margines 10px */
    margin: 10px 3% 20px;  /*  lewy i prawy margines 3% */
  }                        /*  dolny margines 20px */


  .mainbox {                    /*  górny margines 10px */
     margin: 10px 3px 30px 5px; /*  prawy margines 3px */
  }                             /*  dolny margines 30px */
                                /*  lewy margines 5px */

</pre>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('CSS3 Box', '#margin', 'margin') }}</td>
   <td>{{ Spec2('CSS3 Box') }}</td>
   <td>No significant change</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'margin') }}</td>
   <td>{{ Spec2('CSS3 Transitions') }}</td>
   <td>Defines <code>margin</code> as animatable.</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS2.1', 'box.html#margin-properties', 'margin') }}</td>
   <td>{{ Spec2('CSS2.1') }}</td>
   <td>Removes its effect on inline elements.</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS1', '#margin', 'margin') }}</td>
   <td>{{ Spec2('CSS1') }}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<div class="hidden">
<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
</div>

<p>{{Compat("css.properties.margin")}}</p>

<p> </p>

<p> </p>

<div id="compat-mobile"> </div>