Abstände

Abstände meint Abstände zu irgendwas. Genau nämlich zum "Vorgängerr" in der Hierarchie der Seitenelemente. Ist doch klar wie Kloßbrühe. Nur, daß man die gewöhnlich nicht durchschaut. Die Hierarchie.
An sich gibt es Hilfsmittel, etwa spezielle Webeditoren, die solche Hierarchien innerhalb der Webseite anzeigen. "Vorgänger" können Fensterkanten, Seitenelemente wie div-Container, Tabellen etc. sein.
Dazu gehört inhaltlich das Kapitel Rahmen, weil Rahmen ja sowohl außerhalb als auch innerhalb irgendwelche Abstände benötigen.
Von den Abständen gibt es zwei Arten: margin = Außenabstand und padding = Innenabstand, beispielsweise in Tabellenzellen oder Rahmen.

Übersicht möglicher Abstandseinstellungen
Abstands-Bezeichnung Anwendung und Bedeutung Codebeispiel
marginAbstände des ausgewählten Typs von Seitenelementen von anderen, gesammelt etwa in der Form "margin:1mm 5cm" angebbar. Trennung der Einzelmaße erfolgt durch Leerzeichen.
Eine Angabe bedeutet 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 werden im Uhrzeigersinn realisiert.

Die Zelle bringt aus der externen style-Vorlage einen padding mit, der hier reduziert wird. Eingetragen ist:

<p style="margin:-5px; background-color:#fb0">

Der Abstand nach unten hin wird evtl. nicht eingehalten, weil zu wenig Text vorhanden ist.

margin-bottom
margin-left
margin-right
margin-top
Abstand eines Seitenelements zum "Vorgänger", in zulässigen Zahlwerten anzugeben.

Hier lautet der Eintrag:

<p style="margin-top:33%; margin-left:-10px; margin-right:0; background-color:#fb0;">

Bei diesen margins spielt wieder der extern angegebene padding der Tabellenzelle mit!

padding
padding-bottom
padding-left
padding-right
padding-top
Innenabstand allgemein: Für die Reihenfolge von Einzelangaben gilt das zu margin Gesagte.
Einzelangaben: Unten, links, rechts, oben, alle in den zulässigen Zahlwerten anzugeben.
. . . . . . . . . Hier steht in der Zelle:

<TD style="padding:0 10px 20px 40px;">

die externe padding-Angabe wird überschrieben. . . . . . . . . . . . . . . . . . . . . . .
CSS Kurs, © Rolf Hirte, 2001/2007

Valid XHTML 1.0!CSS-Validierung