CSS margin – Abstand von Nachbar-Elementen

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.

<div id="box1" style="
 width: 300px;
 padding: 50px;
 margin: 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 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.

Mit der Eigenschaft box-sizing: border-box werden padding und border direkt mit zur Breite eines Blocks gerechnet. margin ist vom box-sizing nicht betroffen.

<div id="box1" style="
	box-sizing: border-box;
	width: 400px;
	padding: 50px;
	margin: 50px"> 

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 Textabsätzen (p-Elementen) 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:

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 Wert für 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).

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:

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.