CSS margin – Außenabstand

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)