CSS margin-[top|right|bottom|left]

stylesheet.css · margin-[top|right|bottom|left]

.probe {
  margin-top: 24px;
}

Dies ist der 1. Absatz. Er steht in einer Box, deren Stil die Regel links oben bestimmt.

berechneter Wertmargin-top: 24px

Box-Breite–

Box-Höhe–

Erläuterungen

Die Eigenschaften margin-top, margin-right, margin-bottom und margin-left sind Teil der Kurzschrift- Eigenschaft margin. Mit ihnen lässt sich die Breite der außerhalb des Rahmens liegenden Abstände (Randabstände) eines Elements einzeln festlegen.

Alle vier Eigenschaften können auf alle Elemente angewendet werden, innerhalb von Tabellen nur auf die Elemente table und inline-table. Für nicht-replazierte Inline- Level- Elemente wie z. B. Hyperlinks gibt es einige Besonderheiten:

Tipp:

Margins sind auch die Ursache für die Lücken zwischen Überschriften und Absätzen. Im Stylesheet der meisten Browser sind sie auf '1em' voreingestellt. Durch Definition von margin-top bzw. margin-bottom lassen sich die Abstände wie im modernen Schriftsatz anpassen.

margin-top und margin-bottom sind auf nicht-replazierte Inline- Level- Elemente nicht anwendbar. Für untereinander liegende Elemente gelten auch die Regeln der zusammenfallenden Abstände (collapsing margins).
margin-left und margin-right werden, wenn sie sich über mehrere Textzeilen erstrecken, nur links in der ersten Zeile und rechts in der letzten Zeile dargestellt.

Der Hintergrund der margin-Fläche ist immer transparent und kann nicht verändert werden.

Erlaubte Werte

Auszug aus der Spezifikation (die verwendete Syntax wird im Artikel CSS-Wertesyntax genauer erläutert):

'margin-top', 'margin-bottom'
<margin-width> | inherit

'margin-right', 'margin-left'
<margin-width> | inherit

Der Werttyp <margin-width> kann die Werte <length>, <percentage> und auto annehmen.

<length>: Eine absolute oder relative Längenangabe.; Mehr Informationen über Längenwerte in CSS finden Sie im Grundlagenartikel Längenwerte.
<percentage>: Angabe relativ zur Breite des umschließenden Elements, auch für margin-top und margin-bottom. Wenn die Breite des umschließenden Blocks von der Breite des aktuellen Elements abhängt, dann ist das Ergebnislayout undefiniert.
Prozent- und Längenangaben können gemischt werden.; Für margin-top und margin-bottom ist bei Druckausgabe (auch für die Vorschau auf dem Bildschirm) die Seitenhöhe die maßgebliche Größe.
auto: Wird entsprechend der aktuellen Situation vom Anwenderprogramm durch einen passenden Wert ersetzt, der von Größe und Typ der generierten Elemente abhängig ist.
inherit: Bestimmt explizit, dass diese Eigenschaft denselben berechneten Wert wie im Elternelement annimmt.

Code-Beispiel

DIV#main { margin-top: 0.5em; }

Browserunterstützung

Die Eigenschaften margin-top, margin-right, margin-bottom und margin-left werden von allen modernen Browsern unterstützt, mit folgenden Einschränkungen:

IE/Win 5.x: An Inline- Level- Elementen hat dieser Browser bis Version 5.5 scheinbar abhängig vom Kontext einige merkwürdige Darstellungsprobleme.

Eric Meyer's CSS2 Test Suite: margin-top, margin-right, margin-bottom, margin-left.

Keine Eigenschaft und kein Selektor stehen in einem Stylesheet für sich allein. In der Praxis kann das Zusammenspiel zwischen verschiedenen Elementen und Selektoren einen nicht zu unterschätzenden Einfluss auf die Fähigkeiten der Browser haben. Bugs treten oft erst durch das Zusammenwirken mehrerer Eigenschaften an unterschiedlichen Elementen auf.

Wechselwirkungen

margin

Der Wert auto pro Seite

Die Einzelangaben nehmen wie die Kurzschrift den Wert auto an, und erst an ihnen wird deutlich, was er tut. Bei einem Block mit fester Breite verteilt auto den übrigen Platz auf die betroffene Seite: links und rechts zusammen ergibt die Zentrierung, nur rechts schiebt das Element nach links, nur links nach rechts.

Senkrecht gilt das nicht. Ein oberer oder unterer Außenabstand mit auto berechnet sich im normalen Fluss zu null, weshalb sich ein Block auf diesem Weg nicht senkrecht zentrieren lässt. Für absolut positionierte Elemente mit gegebener Höhe gilt die Regel dagegen auch senkrecht.

Negative Werte sind erlaubt und ziehen das Element in die entsprechende Richtung, gegebenenfalls über seinen Nachbarn hinweg. Die Seite zu margin zeigt dafür Beispiele.

Besonderheiten im Medientyp `handheld`

Diese Eigenschaft ist Teil des Standards CSS Mobile Profile 1.0 und unterliegt damit auch in Mobilgeräten allen relevanten Regeln aus CSS 2.1. Einige Mobilgeräte verkleinern Abstände im Stylesheet, um die Darstellung an Kleindisplays zu 'optimieren'. Innerhalb von Text werden sie oft ganz unterdrückt. Größere Abstände an Block- Level- Elementen sind in der Darstellung vielfach bis auf wenige Pixel verringert. Deshalb sollte man für margin keine absoluten Werte, sondern Prozentwerte oder als relative Größen angeben. Dadurch sind sie automatisch an die unterschiedlichen Ausmaße der Displays angepasst.

Weitere Charakteristika

Die Stylesheet-Schnellreferenz mit einer Zusammenfassung aller visuellen Eigenschaften kann auch als PDF-Datei herunter geladen werden.

Ausgangswert: 0
Berechneter Wert: Spezifizierter %-Wert oder absolute Länge
Vererbung: Nein
Anwendbarkeit: Siehe oben
%-Bezugswert: Breite des umschließenden Blocks
Mediengruppe(n): Visual

Verwendete Standards

Dieser CSS-Referenz liegen folgende Spezifikationen zugrunde: CSS 1, CSS 2.1 CR und CSS Mobile.