Einleitung
Mit der CSS Eigenschaft margin wird angegeben, wieviel Abstand um ein Element gesetzt werden soll. Es kann auf Inline- und Blockelemente angewandt werden.
Jedes Element besitzt 4 Seiten. Die Abstände können einzeln, gruppiert oder insgesammt gesetzt werden. Die margin-Eigenschaft besitzt 4 eigene Eigenschaften.
- margin - gibt an, dass alle 4 Seiten eines Elements eingestellt werden sollen
- margin-top – gibt an, dass der Abstand der Oberseite eingestellt wird
- margin-right – gibt an, dass der Abstand der rechten Seite eingestellt wird
- margin-bottom – gibt an, dass der Abstand nach unten eingestellt wird
- margin-left – gibt an, dass der Abstand nach links eingestellt wird
Eigenschaft: margin
CSS-Beispiel Code für margin
div{ margin: 5px 20%; } |
Beispiel erläutert:
Es werden 2 Werte dem margin übergeben. Der erste, 5px, stellt oben und unten (sozusagen top und bottom) ein. Der zweite Wert gibt links und rechts an. Für das Beispiel wurden 20% gewählt. 100% entsprechen die derzeitige Browserbreite. Aneinandergereite Werte sind durch ein Leerzeichen zu trennen. Bei einer 0 wird keine Einheit benötigt (Beispiel: anstatt 0px reicht eine einfache 0 ).
Nur bei margin sind maximal 4 Wertangaben möglich:
- EIN Wert – alle 4 Seiten
- ZWEI Werte – 1. oben und unten, 2. rechts und links
- DREI Werte – 1. oben und unten, 2. rechts, 3. links
- VIER Werte – 1. oben, 2. rechts, 3. unten, 4. links
Eigenschaften: margin-top, margin-right, margin-bottom, margin-left
Diese Eigenschaften bestimmen immer nur den einen angegebenen Außenabstand. Es ist nur ein Wert übergebbar.
Informationen und Werte
Vererbbar: Nein
Initialwert: 0
Werte: Prozentangaben, Längenangaben, Inherit (inherit), Automatisch (auto)
loading...


[...] Position static Liegt ebenfalls im normalen Textfluss. Das Element kann nicht mittels top, right, bottom, left positioniert werden! Hier eignen sich die Eigenschaften für den Außenabstand Margin. [...]
[...] zu anderen Inline- oder Blockelementen. Mittels CSS können Blockelemente einen Innenabstand oder Außenabstand erhalten oder zu einem mittels Position Inlineelement gemacht werden. address blockquote center, [...]
[...] body-Element benötigt einen margin von 0 Pixeln. Wir möchten schließlich keinen inneren Rand, welchen der Browser selbst festlegt. [...]
[...] es möglich, jedem Element eine Hintergrundfarbe zu geben. Dabei spielt es keine Rolle, ob es ein Inlineelement oder Blockelement [...]
[...] left Ein mit float left deklariertes Element wird zu einem Blockelement und links ausgerichtet. Andere Elemente umfließen es. Dabei bleibt das Element links. Funktioniert [...]
[...] body-Element benötigt einen margin von 0 Pixeln. Wir möchten schließlich keinen inneren Rand, welchen der Browser selbst festlegt. [...]
[...] zu anderen Inline- oder Blockelementen. Mittels CSS können Blockelemente einen Innenabstand oder Außenabstand erhalten oder zu einem mittels Position Inlineelement gemacht [...]
[...] bei der text-align Eigenschaft ist zudem, dass es nur auf Blockelemente angewendet werden [...]