Dokumentacja CSS z przykładami: Margin a padding

Q: Czy padding albo margin zwiększa rozmiar elementu?

Padding tak, przy domyślnym box-sizing: content-box: dodaje się go do szerokości i wysokości. Margin nigdy nie jest dodawany do rozmiaru elementu; dodaje przestrzeń wokół niego (blok z width: auto staje się nawet węższy, bo jego marginesy zabierają część dostępnej szerokości). Przy box-sizing: border-box padding jest zabierany z wnętrza szerokości.

Różnica na jednym obrazku

Padding jest wewnątrz obramowania. Margin jest na zewnątrz. Oba pudełka poniżej mają tę samą treść i tę samą wartość 24px; różni się tylko właściwość. Szary to kontener za nimi.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Margin vs padding</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .row { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
    .container { display: flow-root; background: #e5e7eb; width: max-content; }
    .box {
      border: 3px solid #111827;
      background: #2563eb;
      color: white;
    }
    .with-padding { padding: 24px; }
    .with-margin { margin: 24px; }
    .label { font-size: 13px; margin: 6px 0 0; color: #111827; }
  </style>
</head>
<body>
  <div class="row">
    <div>
      <div class="container"><div class="box with-padding">Text</div></div>
      <p class="label">padding: 24px</p>
    </div>
    <div>
      <div class="container"><div class="box with-margin">Text</div></div>
      <p class="label">margin: 24px</p>
    </div>
  </div>
</body>
</html>

Przy padding 24px jest niebieskie: należy do pudełka, jest wewnątrz obramowania, a pudełko rośnie. Przy margin 24px jest szare: pudełko ściśle otacza swój tekst, a przestrzeń na zewnątrz odpycha krawędzie kontenera.

Wypróbuj oba na jednym pudełku

Przesuń dwa suwaki. Padding powiększa niebieskie pudełko; margin odsuwa pudełko od szarych krawędzi, nie zmieniając go.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sliders</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 6px; }
    .container { display: flow-root; background: #e5e7eb; width: max-content; margin-top: 10px; }
    #box { border: 3px solid #111827; background: #2563eb; color: white; }
  </style>
</head>
<body>
  <label>padding <input id="p" type="range" min="0" max="40" value="10"> <span id="pv"></span></label>
  <label>margin <input id="m" type="range" min="0" max="40" value="10"> <span id="mv"></span></label>
  <div class="container"><div id="box">Box</div></div>
  <p id="size"></p>
  <script>
    const box = document.getElementById('box');
    const p = document.getElementById('p');
    const m = document.getElementById('m');
    const update = () => {
      box.style.padding = p.value + 'px';
      box.style.margin = m.value + 'px';
      document.getElementById('pv').textContent = p.value + 'px';
      document.getElementById('mv').textContent = m.value + 'px';
      const r = box.getBoundingClientRect();
      document.getElementById('size').textContent =
        'Blue box: ' + Math.round(r.width) + ' x ' + Math.round(r.height) + 'px';
    };
    p.addEventListener('input', update);
    m.addEventListener('input', update);
    update();
  </script>
</body>
</html>

Obserwuj linijkę z rozmiarem: zmienia się, gdy przesuwasz suwak padding, i pozostaje taka sama, gdy przesuwasz suwak margin.

Margin a padding w skrócie

	Padding	Margin
Gdzie	Wewnątrz obramowania	Na zewnątrz obramowania
Tło	Pokazuje tło elementu	Zawsze przezroczysty
Część obszaru kliknięcia	Tak	Nie
Zwiększa rozmiar elementu	Tak, przy `content-box`	Nie
Może być `auto`	Nie	Tak (`margin: 0 auto` wyśrodkowuje)
Może być ujemny	Nie	Tak
Wartości pionowe się zapadają	Nigdy	Tak, sąsiednie pionowe marginesy się zapadają
Procenty względem	Szerokości bloku zawierającego	Szerokości bloku zawierającego
Typowe użycie	Przestrzeń w przyciskach, kartach, polach	Przestrzeń między elementami, wyśrodkowanie

Każda właściwość ma własną stronę ze wszystkimi szczegółami: CSS padding i CSS margin.

Którego użyć

Zadaj jedno pytanie: czy ta przestrzeń należy do elementu, czy leży między elementami?

Miejsce wokół etykiety przycisku, wnętrze karty, odstęp między tekstem pola a jego obramowaniem: padding. Przejmuje tło i powiększa cel.
Odstęp między dwoma akapitami, między kartami, wokół sekcji: margin, albo gap, gdy rodzic jest kontenerem flex lub grid.

Wybór ma największe znaczenie przy obszarze kliknięcia. Dwa linki poniżej zajmują na stronie tyle samo miejsca, ale w pierwszym ta przestrzeń to padding, a w drugim margin. Tylko w pierwszy łatwo trafić:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Click area</title>
  <style>
    a {
      display: inline-block;
      background: #2563eb;
      color: white;
      text-decoration: none;
      outline: 2px dashed #f59e0b; /* the clickable area */
    }
    .pad { padding: 14px 24px; }
    .mar { margin: 14px 24px; }
  </style>
</head>
<body>
  <a class="pad" href="#">Padding: big target</a>
  <a class="mar" href="#">Margin: tiny target</a>
</body>
</html>

Przerywany bursztynowy kontur to krawędź elementu, czyli obszar, który reaguje na kliknięcia i dotknięcia. Margin wokół drugiego linku to pusta przestrzeń, która nic nie robi.

Odstępy między elementami: margin czy gap

W wierszu lub siatce elementów gap na rodzicu flex lub grid jest zwykle czystszy niż marginesy na każdym dziecku: działa tylko między elementami, nigdy przed pierwszym ani po ostatnim, więc nie trzeba niczego cofać.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>gap</title>
  <style>
    .list { display: flex; gap: 12px; background: #e5e7eb; padding: 12px; }
    .item { background: #16a34a; color: white; padding: 12px 16px; }
  </style>
</head>
<body>
  <div class="list">
    <div class="item">One</div>
    <div class="item">Two</div>
    <div class="item">Three</div>
  </div>
</body>
</html>

Tutaj szary kontener używa padding (przestrzeń w jego wnętrzu, szara), elementy używają padding (przestrzeń w każdym z nich, zielona), a gap zajmuje się odstępami między nimi.

Częste błędy

Używanie margin dla przestrzeni, która ma być kolorowa. Margin jest przezroczysty. Jeśli przestrzeń ma pokazywać tło, to jest padding.
Używanie margin, żeby powiększyć link. Obszar kliknięcia kończy się na obramowaniu; użyj padding.
Oczekiwanie, że dwa pionowe marginesy po 20px dadzą 40px. Sąsiednie pionowe marginesy zapadają się do 20px. Padding nigdy się nie zapada.
Próba wyśrodkowania przez padding: auto. Tylko margin przyjmuje auto.
Zapominanie, że padding powiększa pudełko. Dodaj box-sizing: border-box, żeby width go obejmowało.

Najczęściej zadawane pytania

Czym różni się margin od padding?

Padding to przestrzeń między treścią elementu a jego obramowaniem, wewnątrz elementu. Margin to przestrzeń na zewnątrz obramowania, między elementem a jego sąsiadami. Padding pokazuje tło elementu; margin jest zawsze przezroczysty.

Kiedy używać padding zamiast margin?

Używaj padding dla przestrzeni, która należy do elementu: miejsca wokół tekstu przycisku, wnętrza karty, wszystkiego, co ma mieć to samo tło albo być klikalne. Używaj margin (albo gap we flex i grid) dla przestrzeni między osobnymi elementami.

Czy padding albo margin zwiększa rozmiar elementu?

Padding tak, przy domyślnym box-sizing: content-box: dodaje się go do szerokości i wysokości. Margin nigdy nie jest dodawany do rozmiaru elementu; dodaje przestrzeń wokół niego (blok z width: auto staje się nawet węższy, bo jego marginesy zabierają część dostępnej szerokości). Przy box-sizing: border-box padding jest zabierany z wnętrza szerokości.

Czy padding może być ujemny jak margin?

Nie. Ujemny padding jest nieprawidłowy i ignorowany, a ujemne marginesy są dozwolone i mogą sprawić, że elementy na siebie nachodzą. Padding nie może też mieć wartości auto, dlatego do wyśrodkowania używa się margin: 0 auto.

Powiązane zagadnienia