HTMLWiki.de: Abstände
< HTMLWiki.de >
HTML lernen • Beispiele • Tutorials • KI
Menü

[ START ] [ TUTORIAL ] [ HTML ] [ CSS ] [ KI ] [ SPIELWIESE ] [ SITEMAP ]

Abstände: margin und padding

vom von

Für Abstände kennt CSS zwei Eigenschaften, und der Unterschied ist der Schlüssel: padding ist der Abstand innen (zwischen Rand und Inhalt), margin der Abstand außen (zwischen dem Element und seinen Nachbarn). Ein Bild dazu: padding ist die Polsterung im Paket, margin der Abstand zum nächsten Paket im Regal.

Innen gepolstert, außen auf Abstand
padding hält den Text vom blauen Rand fern,
margin hält den blauen Kasten vom grauen fern.

Die Schreibweisen

CSS-Code

.box { margin: 16px; }                  /* alle vier Seiten */
.box { margin: 8px 16px; }              /* oben/unten, links/rechts */
.box { margin: 8px 16px 24px 16px; }    /* oben, rechts, unten, links */
.box { margin-top: 8px; }               /* eine Seite gezielt */

Die Vier-Werte-Reihenfolge merkt man sich als Uhr: oben beginnend im Uhrzeigersinn. Für einzelne Seiten gibt es die Langformen margin-top, padding-left und so weiter, für padding gelten dieselben Kurzschreibweisn.

Drei Dinge die man wissen muss

  • margin: auto zentriert. Ein Block mit fester Breite und margin: 0 auto teilt den Restplatz links und rechts gleichmäßig auf, der Klassiker für zentrierte Inhaltsspalten. Auch das Hauptfenster dieser Seite steht genau so in der Mitte.
  • Margins verschmelzen. Treffen der untere margin eines Absatzes und der obere des nächsten aufeinander, addieren sie sich nicht, der größere gewinnt. Dieses "margin collapsing" verwirrt jeden einmal, danach rechnet man es ein.
  • padding vergrößert das Element, jedenfalls im klassischen Rechenmodell. Warum das so ist und wie man es abstellt, klärt das Kapitel zum Box Model.

Typische Fehler

  • Abstände mit leeren Absätzen oder br-Ketten faken, das Erbe aus den 90ern. Abstand ist eine CSS-Aufgabe, siehe auch Absätze und Text.
  • Negativen margin als Alltagswerkzeug benutzen. Er hat seine Berechtigung, aber wer ständig Dinge ineinander schiebt, kämpft meist gegen ein Layoutproblem das Flexbox sauberer löst.
  • padding und margin verwechseln und sich wundern warum der Hintergrund mitwächst (padding) oder eben nichtt (margin).

Weiter im Lernpfad: Das Box Model · Zurück: Schriftarten