Listen und Floats
Sie müssen nicht immer 18 Pixel an einer Stelle hinzufügen, sondern lediglich insgesamt ein Vielfaches von 18 Pixeln. Sie können durchaus etwa 12 Pixel oben und 6 Pixel unten hinzufügen. Insgesamt muss die Summe jeweils 18 beziehungsweise ein ganzzahliges Vielfaches von 18 ergeben, um das Raster...
Sie müssen nicht immer 18 Pixel an einer Stelle hinzufügen, sondern lediglich insgesamt ein Vielfaches von 18 Pixeln. Sie können durchaus etwa 12 Pixel oben und 6 Pixel unten hinzufügen. Insgesamt muss die Summe jeweils 18 beziehungsweise ein ganzzahliges Vielfaches von 18 ergeben, um das Raster nicht zu stören.
Listen
Listen sind etwas komplexer als Absätze. Um die Lesbarkeit einer Liste zu verbessern, fügt man vor und/oder nach jedem Listeneintrag oder verschachteltem Listeneintrag einen Abstand hinzu.
In der Praxis können Sie entweder einen recht großen Abstand einer ganzen Grundlinienzeile verwenden oder ganz darauf verzichten, denn nur in diesen zwei Extremfällen können Sie gewährleisten, dass die Listeneinträge exakt auf dem Grundlinienraster zu liegen kommen.
Wenn Sie ein Grundlinienraster wie in unserem Beispiel von 18 Pixeln einsetzen, belassen Sie es lieber bei gar keinem Abstand vor einem Listeneintrag und fügen Sie lieber einen 18 Pixel großen Abstand danach. Konkret also:
Im Falle von verschachtelten Listen sind Sie gut beraten, den halben Wert vor und nach jedem Eintrag einzusetzen (in unserem Beispiel also line-height von 9 Pixeln). Das führt dazu, dass sich der verschachtelte Eintrag genau in die Mitte einer Zeile des Grundlinienrasters verschiebt, dafür kommen aber die nachfolgenden Inhalte genau auf dem Grundlinienraster zum Liegen.
Floats
Bilder und andere Seitenelemente, die sich im Text befinden, müssen eine Höhe besitzen, die durch die Höhe des Grundlinienrasters teilbar ist (in unserem Fall das Mehrfache von 18). Dann können Sie nämlich oben und unten einen margin-Abstand einfügen, der sich zum Mehrfachen des Grundlinienrasters addiert. Dadurch wird der Text korrekterweise direkt unter dem betreffenden Bild umgebrochen.
.left {
float: left;
margin: 0 18px 18px 0;
}
.right {
float: right;
margin: 0 0 18px 18px;
}Andere float-Elemente sind problematischer, da es schwieriger ist, ihre Größe anhand ihrer Inhalte vorherzusehen. Solange Texte und Bilder sowie Abstände in einem Kasten die 18-Pixel-Regel befolgen, sollten sie sich integrieren lassen. Sie dürfen aber nicht vergessen, dass Ränder natürlich ebenfalls mitzählen:
.kasten {
border: 1px solid #ddd;
padding: 8px 8px;
margin-bottom: 18px;
}Da in diesem Beispiel der obere und untere Rand des Kasten insgesamt auf eine Höhe von 2 Pixeln kommen, wurde die padding-Eigenschaft auf jeweils 8 Pixel gesetzt (8 + 8 + 1 + 1 = 18).
Damit im Inneren des Kastens nicht unnötig viel Platz hinter dem letzten Objekt entsteht, müssen Sie explizit Gegenmaßnahmen treffen. Konkret geht es hier darum, dem letzten Objekt in dem Kasten den unteren Abstand zu streichen. Am einfachsten gelingt es mittels:
.kasten :last-child {
margin-bottom: 0;
}Internet Explorer 6 versteht diese Anweisung nicht, aber das ist nicht weiter schlimm. Da das Raster intakt ist, können Sie den extra Abstand in IE6 getrost ignorieren. Beim CSS-Formatieren von Text in einem Kasten wie diesem sollten Sie darauf achten, dass Sie dasselbe Grundlinienraster verwenden sollten - auch dann, wenn Sie die Textgröße verändern.
Alle halbwegs aktuellen Webbrowser skalieren Pixel-basierte Layouts proportional mit dem Text, dagegen aber nicht die Werte der margin-Eigenschaft und auch nicht die Bilder.
Wenn Sie ein Raster als die Grundlage eines Webseiten-Layouts verwenden, können Sie für Ihren Text auch relative Einheiten verwenden. Die Berechnungen der Zeichengröße und des Zeilenabstands werden wesentlich komplizierter, aber das Prinzip bleibt gleich.
