Ausführbare CSS-Docs: Margin vs Padding

Q: Machen Padding oder Margin das Element größer?

Padding schon, unter dem Standard box-sizing: content-box: Es wird zu Breite und Höhe addiert. Margin wird nie zur Größe des Elements addiert, sondern fügt Abstand drumherum hinzu (ein Block mit width: auto wird sogar schmaler, weil seine Margins einen Teil der verfügbaren Breite belegen). Mit box-sizing: border-box wird Padding stattdessen von der Breite abgezogen.

Der Unterschied in einem Bild

Padding liegt innerhalb des Rahmens. Margin liegt außerhalb. Beide Boxen unten haben denselben Inhalt und denselben Wert von 24px; nur die Eigenschaft ist anders. Das Grau ist der Container dahinter.

<!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>

Mit Padding sind die 24px blau: Sie gehören zur Box, liegen innerhalb des Rahmens, und die Box wächst. Mit Margin sind die 24px grau: Die Box bleibt eng um ihren Text, und der Abstand außen drückt die Ränder des Containers weg.

Probier beides an einer Box aus

Bewege die beiden Schieberegler. Padding lässt die blaue Box wachsen; Margin rückt die Box von den grauen Rändern weg, ohne sie zu verändern.

<!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>

Achte auf die Zeile mit der Größe: Sie ändert sich, wenn du den Padding-Regler bewegst, und bleibt gleich, wenn du den Margin-Regler bewegst.

Margin vs Padding im Überblick

	Padding	Margin
Wo	Innerhalb des Rahmens	Außerhalb des Rahmens
Hintergrund	Zeigt den Hintergrund des Elements	Immer transparent
Teil der Klickfläche	Ja	Nein
Vergrößert das Element	Ja, unter `content-box`	Nein
Kann `auto` sein	Nein	Ja (`margin: 0 auto` zentriert)
Kann negativ sein	Nein	Ja
Vertikale Werte fallen zusammen	Nie	Ja, benachbarte vertikale Margins fallen zusammen
Prozent bezogen auf	Breite des umgebenden Blocks	Breite des umgebenden Blocks
Typischer Einsatz	Abstand in Buttons, Karten, Eingabefeldern	Abstand zwischen Elementen, Zentrieren

Jede Eigenschaft hat eine eigene Seite mit allen Details: CSS Padding und CSS Margin.

Welche du nimmst

Stell dir eine Frage: Gehört der Abstand zum Element, oder liegt er zwischen Elementen?

Luft um die Beschriftung eines Buttons, das Innere einer Karte, Abstand zwischen dem Text eines Eingabefelds und seinem Rahmen: Padding. Es übernimmt den Hintergrund und vergrößert die Zielfläche.
Abstand zwischen zwei Absätzen, zwischen Karten, um einen Abschnitt: Margin, oder gap, wenn das Elternelement ein Flex- oder Grid-Container ist.

Am wichtigsten ist die Wahl bei der Klickfläche. Die beiden Links unten nehmen auf der Seite gleich viel Platz ein, aber beim ersten ist der Abstand Padding und beim zweiten Margin. Nur der erste ist leicht zu treffen:

<!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>

Die gestrichelte bernsteinfarbene Umrandung ist der Rand des Elements, also die Fläche, die auf Klicks und Tippen reagiert. Das Margin um den zweiten Link ist leerer Raum, der nichts tut.

Abstand zwischen Items: Margin oder gap

Für eine Reihe oder ein Raster von Items ist gap am Flex- oder Grid-Elternelement meist sauberer als Margins an jedem Kind: Es wirkt nur zwischen den Items, nie vor dem ersten oder nach dem letzten, also gibt es nichts rückgängig zu machen.

<!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>

Hier nutzt der graue Container Padding (Abstand in ihm, grau), die Items nutzen Padding (Abstand in jedem, grün), und gap kümmert sich um den Abstand dazwischen.

Häufige Fehler

Margin für Abstand nutzen, der farbig sein soll. Margin ist transparent. Soll der Abstand den Hintergrund zeigen, ist es Padding.
Margin nutzen, um einen Link größer zu machen. Die Klickfläche endet am Rahmen; nimm Padding.
Erwarten, dass zwei vertikale Margins von 20px zusammen 40px ergeben. Benachbarte vertikale Margins fallen auf 20px zusammen. Padding fällt nie zusammen.
padding: auto zum Zentrieren versuchen. Nur Margin akzeptiert auto.
Vergessen, dass Padding die Box vergrößert. Füge box-sizing: border-box hinzu, damit width es einschließt.

Häufig gestellte Fragen

Was ist der Unterschied zwischen Margin und Padding?

Padding ist der Abstand zwischen dem Inhalt eines Elements und seinem Rahmen, also innerhalb des Elements. Margin ist der Abstand außerhalb des Rahmens, zwischen dem Element und seinen Nachbarn. Padding zeigt den Hintergrund des Elements; Margin ist immer transparent.

Wann nehme ich Padding statt Margin?

Nimm Padding für Abstand, der zum Element gehört: Luft um den Text eines Buttons, das Innere einer Karte, alles, was den Hintergrund teilen oder klickbar sein soll. Nimm Margin (oder gap in Flex und Grid) für Abstand zwischen getrennten Elementen.

Machen Padding oder Margin das Element größer?

Padding schon, unter dem Standard box-sizing: content-box: Es wird zu Breite und Höhe addiert. Margin wird nie zur Größe des Elements addiert, sondern fügt Abstand drumherum hinzu (ein Block mit width: auto wird sogar schmaler, weil seine Margins einen Teil der verfügbaren Breite belegen). Mit box-sizing: border-box wird Padding stattdessen von der Breite abgezogen.

Kann Padding negativ sein wie Margin?

Nein. Negatives Padding ist ungültig und wird ignoriert, negative Margins sind dagegen erlaubt und können Elemente überlappen lassen. Padding kann auch nicht auto sein, deshalb zentriert man mit margin: 0 auto.

Verwandte Konzepte