 |
Abstände meint Abstände zu irgendwas. Das können andere Seitenelemente, Fensterkanten etc. sein. Dazu gehört inhaltlich das Kapitel Rahmen, weil Rahmen ja sowohl innerhalb als auch außerhalb irgendwelche Abstände benötigen. Davon gibt es zwei Arten: padding = Innenabstand, beispielsweise in Tabellenzellen oder Rahmen, sowie margin = Außenabstand.
Übersicht möglicher Abstandseinstellungen
padding:
padding-bottom:
padding-left:
padding-right:
padding-top: | Innenabstand allgemein, unten, links, rechts, oben
in Zahlwerten |
|
| margin: |
Abstände des ausgewählten Typs von Seitenelementen
von anderen, gesammelt angebbar, bei mehreren Angaben
gilt die Uhrzeigerrichtung: oben, rechts, unten, links; |
margin:2px;
margin:5px 5px 5px 5px; |
margin-bottom:
margin-left:
margin-right:
margin-top: |
Abstand eines Typs von Seitenelementen zu den anderen,
in zulässigen Zahlwerten anzugeben |
|
Bei Angaben zu margin: wird es kompliziert.
Eine Angabe bedeutet nämlich Abstand ringsum,
zwei: Erste Zahl steht für oben und unten, zweite
für rechts und links. Drei Angaben: Erste Zahl
steht für oben, zweite für rechts und links und
dritte für unten. Vier Angaben wie Tabelle.
Bei allen Abstandsangaben ist die Frage "Abstand
wovon?" ein wenig problematisch, es wird für
linke Abstände der linke Bild- oder Tabellenzellenrand,
für obere der "Vorgänger" benutzt. Was der Vorgänger
ist, ist schwer eindeutig zu erklären. Es ist nicht
der Text der eigenen Zeile, aber mit <div> deklarierte
Bereiche gelten als Vorgänger. Dies soll illustriert
werden mit dem folgenden Beispielaufruf:
Hier beginnt das Beispiel:
<DIV STYLE="margin:0">
<IMG SRC="bilder/pfeil.gif" HEIGHT="25"
WIDTH="70">xxx
</DIV>ohne Rand
<DIV STYLE="margin:25px">
<IMG SRC="bilder/pfeil.gif" HEIGHT="25"
WIDTH="70">yyy
</DIV>Rand 25 Pixel
<DIV STYLE="margin:-1cm">
Dies ist der verrückte Testtext
</DIV>zzz |
Hier beginnt das Beispiel:
 xxx
yyy
Dies ist der verrückte Testtext
zzz
Jetzt wieder normaler Text.
Obwohl die Aufrufe ohne Angabe von Zeilenumbrüchen
aufeinanderfolgen, sind sie wenigstens prinzipiell untereinander
gesetzt. Der Grund: <DIV> als Containerelemnt erzwingt
den Umbruch. Man beachte aber die Buchstabenfolgen, von
denen xxx und yyy innerhalb des DIV-Containers, zzz dagegen
außerhalb steht. Die Container überdecken teilweise
einander.
Warum in der Tabelle so viel Luft ist? Na klar doch, die
Tabellenzelle enthält einen padding von 35
Pixeln!
|
|
|
DIENSTE
