Seitenränder entfernen

(Auszug aus "CSS Kochbuch" von Christopher Schmitt)

Problem

Sie wollen den Leerraum zwischen den Kanten einer Webseite und dem Rand des Browserfensters entfernen, wie in der nächsten Abbildung gezeigt.

Lösung

Setzen Sie die Werte der Eigenschaften margin und padding für die Elemente html und body auf null:

html, body {
 margin: 0;
 padding: 0;
 position: absolute;
 top: 0;
 left: 0;
}

Als Leerraum dargestellte Seitenränder entlang den Kanten einer Webseite

Abbildung: Als Leerraum dargestellte Seitenränder entlang den Kanten einer Webseite.

Wenn Sie die Eigenschaften padding und margin (Innen- und Außenabstand) für das Element body auf den Wert 0 setzen, kann ein Effekt erreicht werden, als sei die Seite "angeschnitten". Der Leerraum um die Webseite herum wird entfernt (in diesem Fall spielen die Einheiten keine Rolle).

Abhängig von den Inhalten der Seite kann es nötig sein, neben margin und padding noch weitere Eigenschaften anzupassen, um die Ränder komplett zu entfernen. Die Standardeigenschaften (definiert im Stylesheet des Browsers) für bestimmte Elemente können unerwartete Nebenwirkungen haben, wenn Sie versuchen, die Seitenränder zu verändern. Ist das erste Kindelement von body beispielsweise ein h1-Element, so kann oberhalb der Überschrift ungewollt zusätzlicher Leerraum erscheinen (siehe folgende Abbildung). Damit der Effekt leichter zu erkennen ist, wurden die Überschriften und Absätze für die Abbildung mit einem grauen Hintergrund versehen.

Unerwünschter Leerraum oberhalb der Überschrift und an der Oberkante des Browserfensters

Abbildung: Unerwünschter Leerraum oberhalb der Überschrift und an der Oberkante des Browserfensters.

Um auch in dieser Situation sicherzustellen, dass die Seite angeschnitten erscheint, sollten Sie die Innen- und Außenabstände für die betroffenen Elemente (in diesem Fall h1, h2 und h3) zusätzlich zu denen für das body-Element auf 0 setzen. Ist diese Einstellung nicht möglich (zum Beispiel, weil für den unteren Innen- oder Außenabstand ein anderer Wert benötigt wird), können Sie auch die Werte von margin-top und padding-top auf 0 setzen, um den Leerraum oberhalb der Elemente zu entfernen:

html, body {
 margin: 0;
 padding: 0;
 position: absolute;
 top: 0;
 left: 0;}
h1, h2, h3 {
 margin-top: 0;
 padding-top: 0;
 background-color: #666;
}
p {
 background-color: #999;
}

Wie Sie in der nächsten Abbildung sehen können, wird auch mit diesen Anweisungen der gewünschte Effekt erzielt, was gut daran zu erkennen ist, dass der graue Hintergrund jetzt bündig mit dem Ansichtsbereich (Fenster) des Browsers abschließt.

Leerraum oberhalb der Überschrift wurde entfernt

Abbildung: Der Leerraum oberhalb der Überschrift wurde entfernt.

Siehe auch

Das Rezept Einspaltige Layouts zum Erstellen einspaltiger Layouts, indem die Eigenschaften margin und padding einen anderen Wert erhalten als 0.

  

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright der deutschen Ausgabe © 2007 by O’Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS Kochbuch" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

O’Reilly Verlag GmbH & Co. KG, Balthasarstr. 81, 50670 Köln