CSS margin (Außenabstand)

Die CSS-Eigenschaft margin definiert den Abstand um Elemente herum.

margin

Der Außenabstand schafft Freiraum um das Element (äußere Umrandung). Der Außenabstand hat keine Hintergrundfarbe und ist vollständig transparent.

Der Außenabstand kann die oberen, unteren, linken und rechten Außenabstände eines Elements einzeln ändern oder alle Eigenschaften auf einmal ändern.

mögliche Werte

Wert Beschreibung
auto Legt die Browser-Außenabstände fest.
Das Ergebnis hängt vom Browser ab
length Definiert einen festen Außenabstand (mit Pixeln, pt, em usw.)
% Definiert einen Außenabstand unter Verwendung eines Prozentwerts.

RemarkAußenabstände können negative Werte annehmen und Inhalte überlappen.

Margin – einseitige Margin-Eigenschaften

In CSS können für verschiedene Seiten unterschiedliche Außenabstände angegeben werden:

Beispiel

margin-top:100px; margin-bottom:100px; margin-right:50px; margin-left:50px;

Selbst ausprobieren »

Margin – Kurzschreibweise

Um den Code zu verkürzen, können alle Margin-Eigenschaften in einer einzigen Eigenschaft mit margin angegeben werden. Dies wird als Kurzschreibweise bezeichnet.

Die Kurzschreibweise für alle Margin-Eigenschaften istmargin :

Beispiel

margin:100px 50px;

Selbst ausprobieren »

Die Eigenschaft margin kann ein bis vier Werte annehmen.

  • margin:25px 50px 75px 100px;
    • Der obere Außenabstand beträgt 25px
    • Rechter Außenabstand ist 50px
    • Unterer Außenabstand ist 75px
    • Linker Außenabstand ist 100px

  • margin:25px 50px 75px;
    • Der obere Außenabstand beträgt 25px
    • Linke und rechte Außenabstände sind 50px
    • Unterer Außenabstand ist 75px

  • margin:25px 50px;
    • Obere und untere Außenabstände sind 25px
    • Linke und rechte Außenabstände sind 50px

  • margin:25px;
    • Alle vier Außenabstände sind 25px
Examples

Weitere Beispiele

Die Einstellung für den oberen Außenabstand des Textes verwendet Zentimeterwerte.
Dieses Beispiel zeigt, wie man den oberen Außenabstand eines Textes mit einem Zentimeterwert festlegt.

Festlegen Verwenden Sie einen Prozentwert, um den unteren Außenabstand des Textes festzulegen
Dieses Beispiel zeigt, wie der untere Außenabstand mithilfe eines Prozentwerts festgelegt wird, relativ zur Breite des umgebenden Elements.

Alle CSS-Margin-Eigenschaften

Eigenschaft Beschreibung
margin Kurzschreibweise. Legt alle Margin-Eigenschaften in einer einzigen Deklaration fest.
margin-bottom Legt den unteren Außenabstand eines Elements fest.
margin-left Legt den linken Außenabstand eines Elements fest.
margin-right Legt den rechten Außenabstand eines Elements fest.
margin-top Legt den oberen Außenabstand eines Elements fest.
Weitere Erweiterungen