Häufige Fragen

Mit "margin:" wird der Außenabstand und mit "padding:" der Innenabstand angegeben !
Aber was ist der "Außenabstand" und was der "Innenabstand" ? Das Bild unten soll Dieses verständlich machen. Hier ist TEXT in einer Tabellenzelle (td) zu sehen. Der blaue TEXT-Hintergrund dient hier nur zur Demonstration des "Innenbereiches" und "Außenbereiches".
Mit "margin:" wird also der Abstand des TEXTES zum übergeordneten Element (Hier der Rand der Tabellenzelle/td) bestimmt. Mit "padding:" dagegen wird der Abstand zum jeweiligen Elementrand festgelegt, also quasi eine Einrückung (je nach Angabe / "padding-left:", "padding-right:" ... usw.)
Anmerkung: Dies hat nichts mit der CSS-Eigenschaft "text-indent:" zu tun, mit der man eine Texteinrückung der 1. Fließtext-Zeile erreichen kann !

Editieren

HTML-Dateien werden zwischen HTML-Elemente geschrieben. Dabei werden meist "Start-Tags" und "End-Tags" benutzt. Die Elemente erhalten einen Namen, der in Groß- oder Kleinbuchstaben in den Tag geschrieben wird. Tags werden innerhalb spitzen Klammern notiert. End-Tags unterscheiden sich von Start-Tags duch den "/" !
In fast allen HTML-Dateien sind Elemente verschachtelt. Man spricht von Eltern- bzw. Kind-Elementen. Im unteren Beispiel ist das Div-Element das Kind-Element vom Body-Eltement... usw. Dies muss insbesondere bei "margin"- und "padding"- Definitionen beachtet werden ! Nahezu alle HTML-Tags sind durch CSS formatierbar.

Editieren

Seit CSS 2.0 ist es möglich die Positionierung von HTML-Elementen mit der Angabe von position:absolute; oder position:relative; zu bestimmen. Folgende Positionierungen sind erlaubt:

absolute = absolute Positionierung, gemessen am Rand des Elternelements. Scrollt mit.
fixed = absolute Positionierung, gemessen am Rand des Elternelements. Bleibt beim Scrollen stehen.
relative = relative Positionierung, gemessen an der Normalposition oder Anfangsposition des Elements selbst.
static = keine spezielle Positionierung, (Normaleinstellung).

Hierbei sind jedoch nur die Positionsarten "relative" und "absolute" von Bedeutung, da "fixed" bisher nicht vom Microsoft-IE ausgeführt wird! Nun kennt sicher jeder den Unterschied von relativ und absolut. Dennoch sind hier einige Besonderheiten zu beachten!
Zunächst interpretieren weder Netscape noch der MS Internet Explorer Angaben zur absoluten Positionierung in allen HTML-Elementen (wie etwa Textabsätze, Grafiken, Tabellen, Formulare usw). Deshalb erscheint es ratsam solche Elemente immer in einen div-Element einzuschliessen!
Die Positionierung "absolute" verhält sich durchaus relativ, nämlich zum Rand des Elternelements. Wenn sonst kein Elternelement existiert, ist das body-Element das Elternelement. Die Angabe relative bezieht sich dagegen auf die Normalposition des Elements selbst.

Hier wurde ein "div-Bereich" definiert und mit folgenden Style-Sheet-Angaben formatiert:
border:thin solid red; background-color:#EEEEFF; padding:5px 30px; position:relative; top:10px; left:40px; width:100px;

Ein zweiter Bereich; er überlappt den ersten, weil er im Body hinter dem ersten Bereich definiert wurde, und zwar mit folgenden Angaben:
border:thin solid blue; padding:5mm; background-color:#FFEEDD; position:relative; top:-30px; left:130px; width:150px;

Wie Sie sehen sind bei den Positionierungen auch negative Werte möglich.

Editieren