Und weiter geht’s..

Komischer Weise hat sich so ein bisschen das Gerücht verbreitet, dass negative Werte für margin irgendwie falsch oder nicht standardkonform oder Cross-Browser-inkompatibel sein sollen. Das ist natürlich vollkommener Blödsinn, vor allem wenn man bedenkt, wie nützlich es sein kann, negative Werte zu benutzen. Ein Beispiel will ich euch gern zeigen.

Browserunterstützung

Browser
ab Version	1.0	1.0	3.5	1.0	3.0

margin wird natürlich von allen Browsern seit jeher unterstützt, dazu zählt auch die Angabe von negativen Werten. Damit lässt sich allerhand machen und kann einen in so manch einer kniffligen Situation aus der Patsche helfen. Prinzipiell könnte man es vielleicht am ehesten mit position:relative vergleichen. Die Position bzw. die Ausmaße einen Blocks ändern sich.. aber wie immer lässt es sich am besten an einem Beispiel erklären.

Beispiel

Nehmen wir ein einfaches Widget mit einer Überschrift, innerhalb des Widgets gibt es eine Überschrift und Inhalt in irgendeiner Form. Natürlich soll der Inhalt einen gewissen Abstand zum Rand des Widgets haben, dafür nutzen wir logischerweise Padding. Die Überschrift allerdings, soll durch einen Hintergrund farblich hervorgehoben sein.. aber durch das Padding des Widgets entsteht jetzt links und rechts eine Lücke, was also tun?

Schauen wir uns das Ganze mal näher an:

HTML

1
2
3
4

<div class="widget">
	<h4>Überschrift</h4>
	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>

CSS

1
2
3
4
5
6
7
8
9

.widget {
	border:1px solid #aaa;
	padding:0 10px 10px;
	width:200px;
}
h4 {
	background-color:#adf;
	padding:0 10px;
}

Ergebnis

Da haben wirs.. grottig diese blöde Lücke links und rechts – aber es gibt eine Lösung für dieses Problem: negatives Margin to the rescue!

Überschrift bekommt negatives Margin

1
2
3
4
5

h4 {
	background-color:#adf;
	padding:0 10px;
	margin:0 -10px;
}

Ergebnis

Ach schön.