Außenabstand: `margin`

Diese Eigenschaft gibt es seit Version: CSS 1

Erzeugt einen transparenten Abstand zu einem anderen Element. Der Abstand wirkt sich also nicht auf die Hintergrundfarbe aus.

Es gibt verschiedene Wege, einem Element den gewünschten Abstand zuzuweisen. Im Folgendem werden alle Wege geschildert.

Kurzschreibweise

Bei der Kurzschreibweise reicht margin, und der oder die Wert(e).

Ein Wert: Abstand oben, unten, links und rechts
Zwei Werte: Der erste Wert für den Abstand oben und unten, der Zweite Wert für links und rechts
Drei Werte: Der erste Wert für den Abstand oben, der Zweite links und rechts und der Dritte unten
Vier Werte: Der erste Wert für den Abstand oben, der Zweite rechts, der Dritte unten und der Vierte links

Code-Beispiel für `margin` (Kurzschreibweise):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html>
  <head>
    <style type="text/css">
     .aussenabstand {margin:20px 30px 40px 50px;}
    </style>
  </head>
  <body>
    <p class="aussenabstand">Dieses Absatz-element ist mit verschiedenen Abständen formatiert.
                             Der Abstand nach oben beträgt 20px, der nach rechts 30px, der nach 
                             unten 40px und der nach links 50px.
    </p>
  </body>
</html>

Beispiel ansehen

Langschreibweise

Eine andere Möglichkeit bietet die Langschreibweise. Für alle vier Seiten kann man so verschiedene Angaben machen.

margin-top: Für den Außenabstand nach oben. Wird geschrieben: margin-top:Wert;.
margin-right: Für den Außenabstand nach rechts. Wird geschrieben: margin-right:Wert;.
margin-bottom: Für den Außenabstand nach unten. Wird geschrieben: margin-bottom:Wert;.
margin-left: Für den Außenabstand nach links. Wird geschrieben: margin-left:Wert;.

Code-Beispiel für `margin` (Langschreibweise)

(siehe auch Einzelseiten)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html>
  <head>
  <style type="text/css">
    .aussenabstand {margin-top:100px; margin-left:100px; margin-bottom:100px; margin-right:100px;}
  </style>
  </head>

    <body>
      <p class="aussenabstand">Dieses Absatzelement hat zu allen 
Seiten einen Außenabstand von 100 Pixeln. 
      </p>
    </body>
</html>

Beispiel ansehen

Initialwert:	0
Vererbbar:	Nein
Anwendbar auf:	Alle Elemente
Medium:	Visual
Werte:	Längenangabe, Prozentangabe, Inherit und `auto`. `Auto` weist den Browser an, den Wert automatisch zu berechnen. Das heißt, wenn man zum Beispiel `margin: 0 auto;` verwendet, wird das Element horizontal zentriert. Neben positiven Werten sind auch negative Werte erlaubt, von der Benutzung wird allerdings abgeraten.
Prozentuale Werte:	Beziehen sich auf die Abmessungen des Elements (der Box), für das `margin` angegeben ist.