Direktnavigation

Weitere Infos

Sie lesen:
LB Teil 1 (2009)

Little Boxes Teil 1 (Cover)

Aktuell (2015)
Einstieg in CSS

Einstieg in CSS (Cover)


2. Auflage!

Einstieg in CSS (Cover)

Beispielseiten

Inhaltsbereich

7.3 Kalibrierung: Abstände auf null setzen

Alle Browser haben ein eingebautes Stylesheet, und eine ziemlich nervige Sache beim Lernen von CSS ist, dass die Browser für padding und margin zum Teil sehr unterschiedliche Standardvorgaben haben.

Die Abstände der eingebauten Browser-Stylesheets annullieren

Um nicht jedes Mal wieder auf Fehlersuche gehen zu müssen, greifen viele Webdesigner zu einer Maßnahme, die auf den ersten Blick radikal erscheinen mag, die sich aber bewährt hat:

  • padding und margin werden für alle HTML-Elemente auf 0 (Null) gesetzt.

Betrachten Sie es als Kalibrierung, denn durch diese Maßnahme werden die unterschiedlichen Werte der eingebauten Browser-Stylesheets außer Kraft gesetzt und eine einheitliche Ausgangssituation geschaffen.

ToDo: Abstände für alle Elemente auf 0 (null) setzen
  1. Ergänzen Sie die folgende CSS-Regel am Anfang des Stylesheets, nach dem /* Kommentar */ und vor der Regel für body:

    * { padding: 0; margin: 0; }

  2. Speichern Sie das Stylesheet, betrachten Sie die Webseiten im
    Browser und erschrecken Sie nicht.

Das Sternchen als Selektor bedeutet »alles«. Erschrecken Sie nicht, wenn Sie die Seite nach dieser Änderung im Browser betrachten, es wird alles wieder gut:

Abbildung 7.3: Radikale Kalibrierung
Abbildung 7.3: Radikale Kalibrierung

Überschriften, Absätze, Listen und sogar die verschachtelte Liste – alle Elemente sitzen ohne Abstand dicht aufeinander.

Noch mehr Kalibrierung: die Bildlaufleiste im Firefox

Der Firefox blendet die Bildlaufleiste am rechten Fensterrand nur bei Bedarf ein, wodurch vom Übergang von einer Seite mit Scrollbar zu einer Seite ohne (und umgekehrt) das Layout »springt«.

Wenn Sie das stört, können Sie den Firefox mit folgender CSS-Regel zwingen, die Scrollbar immer einzublenden:

html { /* erzwingt Scrollbar im Firefox */
  height: 101%;
}

Die Abstände für die wichtigsten Elemente neu definieren

Die Abstände für Absätze und ungeordnete Listen werden in der folgenden Regel wieder auf akzeptable Werte gesetzt.

ToDo: Abstände für Absätze und Listen restaurieren
  1. Definieren Sie am Ende des Stylesheets die folgenden CSS-Regeln:

    /* Abstand nach unten */
    h2, p, ul, ol { margin-bottom: 1em; }

    /* Verschachtelte Listen ohne Abstand */
    ul ul { margin-bottom: 0; }

    /* Abstand von links */
    li { margin-left: 1em; }

  2. Speichern Sie das Stylesheet und betrachten Sie die Webseiten im
    Browser.

Mit diesen Regeln definieren Sie für alle h2-Überschriften, Absätze und Listen einen Außenabstand nach unten von 1em. Alle li-Elemente bekommen einen Abstand nach links von ebenfalls 1em, damit sie etwas eingerückt werden und das Aufzählungszeichen wieder sichtbar wird.

Erwähnenswert ist noch der Selektor ul ul, der eine Liste in einer Liste auswählt und den direkt vorher definierten margin-bottom für ul für die inneren Listen wieder entfernt, damit auf der Startseite unterhalb der verschachtelten Liste keine Lücke entsteht.

Abbildung 7.4: Absätze und Listen mit restauriertem margin
Abbildung 7.4: Absätze und Listen mit restauriertem margin
Noch mehr Abstände zum Restaurieren

Falls Sie auf Ihren Webseiten weitere Elemente wie ol oder blockquote verwenden, denken Sie daran, auch für diese die Abstände zu restaurieren.