Der eigene Online-Shop für Profi-Fotografen. Für Fotografen, die keine Zeit zu verlieren haben.

CSS-Eigenschaft: margin, Kategorien: Abstände (allgemein), Box model (CSS 2.1), Basic Box Model (CSS 3)

Außenabstand (allgemein)

Steuert den Außenabstand von HTML-Elementen.

CSS-Eigenschaft: margin
KurzbeschreibungWerteStandardwertKategorieHinweis
Außenabstand (allgemein)
  • <length>
  • <percentage>
  • inherit
0
Allgemein:
Abstände
CSS 2.1:
Box model
CSS 3:
Basic Box Model
 

Folgendes ist beim Einsatz von margin zu beachten:

  • margin ist die Kurzschreibweise für Außenabstände und definiert mit einem Ausdruck die Werte für margin-top, margin-right, margin-bottom und margin-left. Es können 1 - 4 Parameter angegeben werden. Die Parameter wirken in der Reichenfolge [oben][rechts][unten][links]. Oder einfacher zu merken, ab 12:00 Uhr im Uhrzeigersinn, also [12:00][3:00][6:00][9:00].
  • Werden keine 4 Parameter angegeben, wird der fehlende Abstand von der gegenüberliegenden Seite übernommen. Das heißt, fehlt der 4. Wert für den linken Abstand, wird der von rechts (2. Parameter) übernommen, fehlt auch der 3. Parameter für unten, wird der Abstand von oben (1. Parameter) übernommen. Die Angabe von nur einem Parameter bestimmt den Außenabstand auf allen Seiten.
  • Werte können absolut in EM, PX usw. oder relativ in % angegeben werden.
  • Eine Prozentangabe bezieht sich auf die Breite des umgebenden Block-Elements.
  • Ein Außenabstand wirkt sich nicht auf die eigentliche Breite bzw. Höhe des HTML-Elements aus. Der gesamte Platzbedarf ergibt sich allerdings aus der Breite bzw. Höhe des Elements zuzüglich des vertikalen bzw. horizontalen Abstands, der Platzbedarf wächst also an!
  • Unter http://www.w3.org/TR/CSS21/box.html#collapsing-margins des W3C sind die unterschiedlichen Regeln beschrieben, wann und wie margin von neben- bzw. untereinanderstehender HTML-Elemente zusammen klappen. Zuverlässig beziehungsweise erwartungsgemäß funktioniert margin zwischen zwei Block-Elementen. Sobald eins von zwei Elementen ein Inline-Element ist, kann es zum Wegfall des Außenabstands kommen.
  • Negative Werte sind zulässig, die Darstellung im Browser hängt vom Aufbau des HTML ab.
Browserunterstützung von margin
Firefox
Firefox
Google Chrome
Google
Chrome
Internet Explorer
Internet
Explorer
Safari
Safari
Opera
Opera
CSS21
Version: 16Version: 25Version: 30Version: 31Version: 32
j
Version: 20Version: 30Version: 35Version: 36Version: 37
j
Version: 8Version: 9Version: 10Version: 11
j
Version: 4Version: 5Version: 6Version: 7
j
Version: 10Version: 11Version: 12
j

Weiterführende Informationen zu margin:



Beispiele

HTML:

<div>
   <div>Hier ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text.</div>
</div>

CSS:

div {
   border: 1px solid black;
   background-color: #ccc;
}
div div {
   border: 10px solid red;
   background-color: #FFFF70;
}
/* Ausgangssituation:
Zwei verschachtelte DIVs, das äußere ist umgeben von einem 1px Rahmen in schwarz.
Das innere DIV hat einen roten Rahmen, um in den Beispielen hervorzuheben, wie das margin dargestellt wird.
Das äußere DIV hat einen grauen Hintergrund, der es bei einem margin des inneren DIV sichtbar wird. */

Beispiel Nr. 1 So sieht's aus:

Hier ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text.
 

HTML:

<div>
   <div class="doPx">Hier ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text.</div>
</div>

CSS:

div.doPx {
   margin: 10px;
}
/* Ein Parameter bestimmt den Außenabstand auf allen Seiten, und lässt die graue Hintergrundfarbe des umgebenden DIVs erscheinen. */

Beispiel Nr. 2 So sieht's aus:

Hier ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text.
 

HTML:

<div>
   <div class="doEm">Hier ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text.</div>
</div>

CSS:

div.doEm {
   margin: 1.8em;
}
/* Alternative Schreibweise mit EM. Diese ist von der Schriftgröße anbhängig. */

Beispiel Nr. 3 So sieht's aus:

Hier ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text.
 

HTML:

<div>
   <div class="doPerc">Hier ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text.</div>
</div>

CSS:

div.doPerc {
   margin: 3%;
}
/* Prozentuale Angaben beziehen sich auf die Ausmaße des äußeren DIV. */

Beispiel Nr. 4 So sieht's aus:

Hier ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text.
 

HTML:

<div>
   <div class="doZwei">Hier ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text.</div>
</div>

CSS:

div.doZwei {
   margin: 5px 40px;
}
/* Zwei Parameter, der erste steuert den Abstand für oben und unten, der zweite den für links und rechts. */

Beispiel Nr. 5 So sieht's aus:

Hier ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text.
 

HTML:

<div>
   <div class="doDrei">Hier ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text.</div>
</div>

CSS:

div.doDrei {
   margin: 25px 5% 4em;
}
/* Bei drei Parametern steuert der zweite Wert sowohl den linken als auch rechten Abstand. Ein Mix von unterschiedlichen Maßeinheiten ist möglich. */

Beispiel Nr. 6 So sieht's aus:

Hier ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text.
 

HTML:

<div>
   <div class="doVier">Hier ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text.</div>
</div>

CSS:

div.doVier {
   margin: 15% 10px 5pt 4em;
}
/* Über vier Werte wird jeder Seitenabstand individuell gesteuert. */

Beispiel Nr. 7 So sieht's aus:

Hier ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text.
 

HTML:

<div>
   <span class="doSpan">
      <span>Hier ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text.</span>
   </span>
   <span class="doSpan">
      <span>Hier ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text.</span>
   </span>
   <p>Ein P-Tag dazwischen</p>
   <span class="doSpan">
      <span>Hier ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text.</span>
   </span>
</div>

CSS:

span.doSpan {
   border: 3px solid red;
   margin: 30px;
   background-color: #FFFF70;
}
p {
   border: 2px solid blue;
   margin: 0px;
}
/* Inline-Elemente unterstützen margin nur bedingt. Der Abstand von links und rechts zum äußern Block als auch zwischen den beiden SPANs wird dargestellt, allerdings nur in der ersten und letzten Zeile eines SPANs.
Oberer und unterer Abstand werden nicht dargestellt. */

Beispiel Nr. 8 So sieht's aus:

Hier ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text. Hier ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text.

Ein P-Tag dazwischen

Hier ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text.
 

Fehler melden

Diese Referenz ist ein Freizeitprojekt ohne aufwendiges Lektorat oder Vergleichbarem. Von daher lassen sich bei dem Umfang dieser Referenz trotzt größtmöglicher Sorgfalt Fehler nicht vermeiden.

Hilf, die Qualität dieser Seite zu verbessern! Sollte Dir ein Fehler auffallen, sei es in den Erklärungen, Beispielen oder den Informationen zum Browsersupport, seien es orthographische oder grammatikalische, sende eine kurze E-Mail an info@css-wiki.com. Auch Anregungen und Verbesserungsvorschläge sind jeder Zeit Willkommen. Jede E-Mail wird persönlich beantwortet!

Vielen Dank!

A-Z:

Schnell­auswahl

Seiten:

Letzte Änderung: 01. 04. 2017
Render Time: 6.79 sec.

Browser-Marktanteile