CSS-Außenabstand (Margin)

CSS Tutorial > Außenabstand

Wie wir bereits beim Box-Modell gesehen haben, ist der Außenabstand der Platz außerhalb des Rahmens und wird benutzt um den Abstand zwischen den verschiedenen Elementen zu bestimmen. Eine Box hat vier Seiten. Deswegen können wir Außenabstände an 4 Seiten bestimmen:

margin-top

margin-right

margin-bottom

margin-left

Es gibt eine fünfte Eigenschaft, margin, die als Kurzbezeichnung für die oben genannten Eigenschaften benutzt werden kann.

Außenabstände können auf 3 Wege festgelegt werden: Länge, Prozentangabe, oder automatisch. Schauen wir uns ein Beispiel an:

#container {
margin-top:5px;
margin-left:10%;
margin-right:auto;
margin-bottom:20px;
border: 1px solid 000000;
}

Der folgende HTML-Code:

<div id="container">
Dies ist ein Beispiel für Außenabstände
</div>

würde so aussehen:

Dies ist ein Beispiel für Außenabstände

Beachten Sie, dass der Außenabstand zwischen der Box und der oberen, linken und unteren Seite des hellgrünen Bereiches 5px, 10% und 20px ist.

Außenabstand-Kurzbezeichnungen

Alle vier Außenabstände können mit der margin-Eigenschaft über eine einzelne Zeile bestimmt werden. Der Syntax hierfür ist wiefolgt:

margin: [margin-top] [margin-right] [margin-bottom] [margin-left]

Die Reihenfolge ist hier sehr wichtig. Das erste Element ist immer der obere Außenabstand, das zweite der rechte Außenabstand, das dritte der untere Außenabstand und das vierte ist der linke Außenabstand.

Folgende Seite: CSS Border