Dez 2011

CSS margin :: Abstand gegen umfassende und benachbarte Elemente

Das »Boxmodell« definiert einen inneren Rand padding, einen Rahmen border und einen äußeren Rand margin um das Element.

CSS margin legt einen Abstand gegen benachbarte Elemente fest – z.B. den vertikalen Abstand zweier div-Elemente im Layout einer Webseite.

Bei der Berechnung der Größe einer Layoutbox bleibt margin margin im Gegensatz zu 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: 0 50px">

Diese Box hat also eine Breite von 400 Pixeln: 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 kommt zum Einsatz, um die Inhalte einer Box vom Rahmen der Box fern zu halten. Der innere Abstand padding zeigt die gleiche Hintergrundfarbe wie das Element. Zwischen margin und padding liegt border – der Rahmen.

Vorgegebener margin bei HTML-Elementen

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.

margin bei positionierten Elementen

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. Die Werte für den horizontalen margin zweier Elemente werden immer addiert.

Bei absolut, relativ oder durch float positionierten Elementen hingegen addieren sich die margins nebeneinander und untereinander liegender Boxen. 

<div style="width: 150px; height: 50px; margin: 25px;
            padding: 20px; border: 5px dotted #759DB2;  
            float: left;"> … </div>
<div style="width: 200px; height: 40px; margin: 10px;
            padding: 30px; border: 5px dotted #759DB2; 
            float: left;"> … </div>
<div style="width: 460px; height: 50px; margin: 25px;
            padding: 20px; border: 10px solid #759DB2;  
            clear: both;"> … </div>

Werte für margin

IE4+ M1 N4+ O5+ CSS1 Erblich: Nein

margin
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
  • Ein Wert: Alle vier Einzüge werden durch einen Wert bestimmt.
  • Zwei Werte: Der erste Wert regelt margin-top und margin-bottom, der zweite Wert margin-left und margin-right.
  • Drei Werte: Der erste Wert ist margin-top, der zweite margin-left und margin-right, der dritte Wert ist margin-bottom.
  • Vier Werte: Die Reihenfolge ist top, right, bottom, left.
length
kann in cm (Zentimeter), em (ems), 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.