Informatik :: CSS :: Abstände
Sie können innerhalb eines Dokumentes ganze Textblöck beliebig
plazieren, indem Sie mit dem Attribut margin einen Abstand zum Rand
oder dem nächsten Absatz definieren. Dabei sind alle vier Seitenkanten
eines Dokuments nutzbar, als oben (top), links (left), unten
(bottom) und rechts (right).
Und last but not least lassen sich alle Angaben auch noch gemeinsam
verwenden, d.h., mit einer Kombination aus margin-left und
margin-top
können Sie einen Textabschnitt gezielt in der Mitte einer Webseite
anordnen.
Mit dieser Technik lassen sich Texte auch beliebig miteinander verschachteln
oder zeilenweise versetzt darstellen.
Beim Einsatz des Attributes margin ist allerdings besondere Vorsicht
angebracht. Wenn Sie eine einigermaßen gleiche Darstellung in beiden
Browsern, also Netscape und Internet Explorer, erreichen wollen, so kommen
Sie kaum um zeitaufwendige Tests mit den verschiedenen Browsern herum.
Da die Angaben von Fall zu Fall sehr unterschiedlich interpretiert werden,
ist es relativ schwierig, einen gemeinsamen Nenner für beide Lösungen
zu finden.
Beispiel:
<h1 style="margin-left:5cm; margin-top:2cm"> Beispiel 1</h1>
<h1 style="margin-left:4cm; margin-top:5px"> Beispiel 2</h1>
<h1 style="margin-left:3cm; margin-top:5px"> Beispiel 3</h1>
Das Beispiel hätte folgendes Aussehen.
Um Text wirkungsvoll in Szene zu setzen, reicht oft der normale Abstand
zwischen den einzelnen Zeichen nicht aus. Insbesondere wenn der Text eine
beschreibende oder gestaltende Funktion einnimmt, ist normal zusammenstehender
Text absolut unbrauchbar.
Bei CSS steht das Attribut letter-spacing zur Verfügung,
mit dem der Abstand zwischen den einzelnen Buchstaben nach Belieben eingestellt
werden kann. Hier ist eine numerische Angabe des Abstandes notwendig, was
ein absoluter oder ein relativer Wert in Prozent sein kann.
Leider wird das Attribut letter-spacing zur Zeit nur vom Internet Explorer
interpretiert.
Beispiel:
<p style="letter-spacing:15px"> Text mit Abständen</p>
<h1 style="letter-spacing:40pt">Text</h1>
Das Beispiel hätte folgendes Aussehen.
Mit dem individuellen Einstellen der Zeilenhöhe können Sie Textabschnitte auch besonders hervorheben oder die Gliederung eines Dokumentes besonders betonen. Das Festlegen der Zeilenhöhe erfolgt mit dem Attribut line-height und einem numerischen Wert
Beispiel:
<p style="line-height:12pt"> Text</p>
Aufgabe:
