Das Box-Modell
Wenn man anfängt, Websites mit CSS statt mit Tabellen aufzubauen, sollte man sich als ersten Schritt mit dem sogenannten Box-Modell befassen. Einen ausgezeichneten Artikel dazu findet man dazu auf SELFHTML:
selfhtml.vtxnet.ch/css/formate/box_modell.htm
Hier wird alles Wesentliche einfach und ausführlich erklärt. Ausserdem finden Sie hier auch eine Grafik, welche das Modell veranschaulicht. In der Grafik sind mit blauer Schrift die CSS-Eigenschaften angegeben, mit welcher man die Boxen steuern kann.
8ung Anfängerfehler: Die mit Eigenschaft padding definierten Werte zählen zu der Breite (=width) und der Höhe (=height) einer Box dazu. Hier sorgt die deutsche Übersetzung von padding - Innenabstand!!! - wohl für Verwirrung...Schreibarbeit sparen
Bei den Formatierungen von Boxen können Sie sich viel Schreibarbeit sparen, weil hier eine Art zusammenfassender Stil erlaubt ist. Am besten lässt sich das durch ein Beispiel zeigen:
padding-top: 20px;
padding-right: 5px;
padding-bottom: 15px;
padding-left: 10px;
Lässt sich viel kürzer schreiben:
padding: 20px 5px 15px 10px;
Beachten Sie, das hier Strichpunkte zwischen den Werten nicht erlaubt sind. Ausserdem müssen Sie die Reihenfolge im Kopf behalten, es geht bei der Notation der Werte immer im Uhrzeigersinn herum: oben rechts unten links. Dieser Trick lässt sich anwenden bei padding, margin und border.