CSS margin – Abstand von Nachbar-Elementen

CSS margin Abstand nach oben, rechts, unten und links

Das Boxmodell definiert CSS margin als Abstand, padding als Polster und einen Rahmen border um das Element. margin legt einen Abstand gegen benachbarte Elemente fest (z.B. den vertikalen Abstand zweier div-Elemente im Layout einer Webseite) und auch den Abstand vom umfassenden Element.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Größe eines Blocks mit margin und padding

Bei der Berechnung der Größe einer Layoutbox bleibt margin im Gegensatz zu CSS padding und border außen vor: Die Breite von padding und border zählt zur Breite des Elements, aber margin wird nicht eingerechnet.

margin vertikal und horizonal
margin horizontal und vertikal
<div id="box1" style="width: 300px; padding: 50px; margin: 0 50px"> 

Diese Box hat also eine Breite von 400px: width + padding-left + padding-right

margin

margin, der äußere Rand, bildet den Abstand des Elements gegen den umgebenden und benachbarten bzw. folgenden Block. margin wird insbesondere beim Positionieren von HTML-Blöcken eingesetzt, um die Layout-Elemente einer Webseite auf Abstand voneinander zu halten.

padding

padding ist ein »Polster« zum Rand und hält die Inhalte einer Box vom Rahmen der Box fern. CSS padding zeigt die gleiche Hintergrundfarbe wie das Element. Zwischen margin und padding liegt border – der Rahmen.

Default margin

margin ist eine Eigenschaft, die nicht nur über einen CSS-Stil vergeben wird. Sie ist in vielen HTML-Elemente bereits enthalten: Die Browser rendern p-Tags mit einem margin nach oben und nach untern. Durch diese Abstände kommt der „Durchschuss“ zustande, der zwischen zwei Absätzen angezeigt wird.

Das body-Element eines HTML-Dokuments weist einen margin zum Browserfenster auf, der in den verschiedenen Browsern unterschiedlich groß ist. ul- und ol-Elemente werden in Internet Explorer mit margin nach links gegen die umfassende Box dargestellt. In Mozilla werden ul- und ol-Elemente durch padding-left eingerückt.

Collapsing margin: Vertikale Abstände

Die Werte für margin von Elementen, die nicht positioniert sind, addieren sich bei vertikalen Abständen nicht, sondern nur der größere Wert des oberen oder unteren Elements wird benutzt – diesen Effekt nennt man collapsing margins.

Ein Beispiel für einen kollabierenden margin:

Aufeinander folgende vertikale margins

Gaudeamus igitur iuvenes dum sumus

h1 { font-size: 20px; margin-bottom: 50px; }
p { font-size: 16px; margin-top: 25px; line-height: 20px}

Der Abstand zwischen h1 und p beträgt 50px, da p einen kleineren margin hat. Die Abstände kollabieren auf den Wert des größeren margin (die Werte für den horizontalen margin zweier Elemente hingegen werden immer addiert).

margin und child-Elemente

Gaudeamus igitur iuvenes dum sumus

h1 { font-size: 20px; margin-bottom: 50px; }
p { font-size: 16px; margin-top: 25px; line-height: 20px}
div { margin: 40px 0 25px 0; }
   …
<div>
   <h1>margin und child-Elemente</h1>
   <div>
      <p>Gaudeamus igitur iuvenes dum sumus</p>
   </div>
</div>

Die Werte von h1, div und p für margin kollabieren und bilden einen Gesamt-Abstand von 50px.

Bei positionierten Elementen addieren sich die Werte für margin nebeneinander und untereinander liegender Boxen. Ausnahmen, bei denen übereinander liegende margins nicht kollabieren:

  • Bei Elementen mit CSS float,
  • absolut positionierte Elemente,
  • bei inline-block,
  • Elemente mit overflow: scroll und overflow: clip
  • Elemente mit CSS clear
.foo { height: 100px; margin: 25px 5px; float: left;}
.r2 { margin-top: 50px}

<div class="demobox">
   <div class="foo"></div>
   <div class="foo"></div>
   <div class="foo r2"></div>
   <div class="foo r2"></div>
</div>
	

Der margin der Boxen in der oberen Reihe beträgt 25px, margin-top der zweiten Reihe ist 50px. Die Werte addieren sich zu 75px.

Werte für margin

margin (Kurzschrift)
fasst margin-top, margin-right, margin-bottom und/oder margin-left zusammen und gibt sie in einer CSS-Regel an.
Werte
Werte [ <length> | <percentage> | auto ] {1,4}

{1,4}: margin kann einen, zwei, drei oder vier Werte angeben:

1 Wert
Ein Wert: Alle vier Einzüge werden durch einen Wert für margin bestimmt.
2 Werte
Zwei Werte für margin: Der erste Wert regelt margin-top und margin-bottom, der zweite Wert margin-left und margin-right.
3 Werte
Drei Werte: Der erste Wert ist margin-top, der zweite margin-left und margin-right, der dritte Wert ist margin-bottom.
4 Werte
Vier Werte: Die Reihenfolge ist top, right, bottom, left.
	margin: 15px; 
	        ^
	        |
	        +----- margin-top, margin-right, margin-left, margin-bottom
	
	margin: 15px 25px;
	        ^    ^
	        |    |
	        |    +----- margin-right, margin-left
	        +----- margin-top, margin-bottom
	        
	margin: 15px 25px 10px;
	        ^    ^    ^
	        |    |    |
	        |    |    +----- margin-bottom; 
	        |    +----- margin-right, margin-left
	        +----- margin-top
	        
	margin: 15px 25px 10px 5px;
	        ^    ^    ^    ^
	        |    |    |    |
	        |    |    |    +----- margin-left
	        |    |    +----- margin-bottom 
	        |    +----- margin-right
	        +----- margin-top
length
kann in cm (Zentimeter), em (ems), rem, ch, ex (x-Höhe), in (Inch), mm (Millimeter), pc (Pica), pt (Punkt), px (Pixel) angegeben werden.
percentage (Prozentsatz)
basiert auf der vollen Elementbreite, die als 100% definiert ist.
auto
weist den Browser an, die Größe des Einzugs automatisch zu berechnen. auto stellt sicher, dass vorangegangene Regeln den Einzug nicht beeinflussen.