Cascading Style Sheets (CSS)
Das Box-Modell
Das Box-Modell ist enorm wichtig für das Verständnis von CSS, denn hier geht's nicht nur um ein paar Funktionsweisen, sondern auch wieder um ein paar Begriffe, die dann immer und immer wieder vorkommen.
Also, zunächst mal: Jedes HTML-Element steckt in einer Box (Schachtel). Ob das nun ein Abschnitt, ein Titel oder der ganze <body>-Teil ist, ist egal; da hat jedes seine eigene Schachtel. Und zu jeder solchen Box gehören ein paar Eigenheiten:
Jedes Element kann also einen eigenen Rahmen haben. (Tatsächlich: eine Angabe wie z.B.
h1 { border: 4px red solid }
würde bewirken, dass jeder Haupt-Titel mit einer 4 Pixel breiten roten Linie
umrahmt wird.)
Der Bereich zwischen dem Element selber und seinem Rahmen ist das sogenannte Padding. Damit kann man z.B. verhindern, dass ein Rahmen direkt am Text anliegt und ihm einen gewissen Abstand geben.
Jedes Element kann auch eigene Hintergrund-Definitionen (z.B. Farbe oder Bild) haben. Die erstrecken sich über den Bereich des Elementes und des Paddings.
Ausserhalb des Rahmens beginnt mit dem Margin-Bereich die Ellbogenfreiheit: Hier wird der Abstand definiert, der zu den andern Elementen einzuhalten ist.
Alle drei Bereiche, Padding, Border und Margin sind in ihren Ausmassen frei definierbar und können natürlich auch bis auf Null schrumpfen. Aber Margin, Border und Padding sind Eigenschaften, die für jedes Element vorkommen können und mit deren Hilfe natürlich die Gestaltung der Seiten entscheidend beeinflusst werden kann.
Ich kann dir übrigens auch wieder empfehlen, dir den Quellcode dieser Seite anzusehen und darin die Box-Abbildung zu suchen. Das ist nämlich kein Bild, sondern eine Anwendung von Margins und Padding, die zudem auch noch die CSS-interne "Vererbungslehre" illustriert. Ich habe den Quellcode ausführlich kommentiert, damit klar wird, wie die einzelnen Angaben zu Stande gekommen sind.
