CSS 2.1: `margin-[top|right|bottom|left]`

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

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.

Ausgangs- wert:	Berechneter Wert:	Vererbung:	Anwendbar- keit:	%-Bezugs- wert:	Medien- gruppe(n):
`0`	Spezifizierter `%`-Wert oder absolute Länge	Nein	Siehe oben	Breite des umschließenden Blocks	Visual

Verwendete Standards

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

TOP

Notizen: