CSS margin Eigenschaft

Definition und Verwendung

Die margin-Kurzformeigenschaft stellt alle Abstandseigenschaften in einer Erklärung ein. Dieses Attribut kann 1 bis 4 Werte haben.

Erklärung

Diese Kurzformeigenschaft legt die Breite aller Abstände eines Elements fest oder die Breite der Abstände auf jeder Seite.

Die vertikalen benachbarten Abstände von Blockelementen werden zusammengefasst, und Inline-Elemente nehmen tatsächlich keine oberen und unteren Abstände ein. Die horizontalen Abstände von Inline-Elementen werden nicht zusammengefasst. Ebenso werden die Abstände von Floating-Elementen nicht zusammengefasst. Negative Abstandswerte können angegeben werden, aber sie sollten vorsichtig verwendet werden.

Anmerkung:Negative Werte sind erlaubt.

Beispiel 1

margin:10px 5px 15px 20px;
  • Oberer Abstand ist 10px
  • Rechter Abstand ist 5px
  • Unterer Abstand ist 15px
  • Linker Abstand ist 20px

Beispiel 2

margin:10px 5px 15px;
  • Oberer Abstand ist 10px
  • Rechter und linker Abstand sind 5px
  • Unterer Abstand ist 15px

Beispiel 3

margin:10px 5px;
  • Obere und untere Abstände sind 10px
  • Rechter und linker Abstand sind 5px

Beispiel 4

margin:10px;
  • Alle 4 Abstände sind 10px

Siehe auch:

CSS Tutorial:CSS Außenabstand

HTML DOM Referenzhandbuch:margin Eigenschaft

Beispiel

Stellen Sie die 4 Abstände des p-Elements ein:

p
  {
  margin:2cm 4cm 3cm 4cm;
  }

Probieren Sie es selbst aus

CSS Syntax

margin: length|auto|initial|inherit;

Attribute Wert

Wert Beschreibung
auto Der Browser berechnet den Abstand.
length Es wird der Wert des Abstands in spezifischen Einheiten festgelegt, z.B. Pixel, Zentimeter usw. Der Standardwert ist 0px.
% Der Abstand wird als Prozentsatz der Breite des umschließenden Elements angegeben.
inherit Es wird festgelegt, dass der Abstand vom übergeordneten Element geerbt werden soll.

Technische Details

Standardwert: 0
Vererbbarkeit: nein
Version: CSS1
JavaScript Syntax: object.style.margin="10px 5px"

Mehr Beispiele

Alle Ränder Attribute in einer Erklärung
Dieses Beispiel zeigt, wie alle Ränder Attribute in einer Erklärung eingestellt werden.

Browser-Unterstützung

Die Zahlen in der Tabelle weisen auf die erste Browser-Version hin, die diese Eigenschaft vollständig unterstützt.

Chrome IE / Edge Firefox Safari Opera
1.0 6.0 1.0 1.0 3.5