Stil mit {stil}

Feb 2009

CSS margin :: Abstand gegen umfassende und benachbarte Elemente

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

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.

img {	border: 5px solid thistle; 
	background: gainsboro; 
	padding: 10px; 
	margin: 15px; }

Vorgegebener margin bei HTML-Elementen

margin ist eine Eigenschaft, die nicht nur über eine CSS-Eigenschaft vergeben wird. Sie ist in vielen HTML-Elemente bereits enthalten: In p-Elementen liegt ein Abstand nach oben und ein Abstand 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 Abstand zum Browserfenster auf, der in den verschiedenen Browsern unterschiedlich groß ist. ul- und ol-Elemente werden in Internet Explorer mit einem Abstand 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 addieren sich die margins nebeneinander und untereinander liegender Boxen (siehe Beispiel oben).

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.

zurück zum Seitenanfang