Das CSS Formatierungsmodell 

margin border padding Elementinhalt

Die Fläche, die ein beliebiges Element zur Darstellung benötigt, wird durch ein Rechteck beschrieben. Die minimale Fläche ergibt sich dabei aus dem Platzbedarf, die der eigentliche Elementinhalt in Anspruch nimmt. Jedes Element kann durch einen Rand um den Inhalt (padding), durch einen Rahmen (border) und einen weiteren (transparenten) Rand (margin), der den minimalen Abstand zu benachbarten Elementen beeinflußt, erweitert werden. Die Rand- und Rahmenbreiten lassen sich für jede Seite individuell festlegen.
Damit ist das Grundprinzip der optischen Darstellung einzelner Elemente beschrieben. Wie Elemente relativ zueinander innerhalb eines Dokuments plaziert werden, hängt von weiteren Angaben ab.

Für die Formatierung und Plazierung von Elementen ist entscheidend, welcher Formatklasse ein Element zugeordnet wird. Im Prinzip gibt es zwei Hauptklassen von Elementen: block-level und inline-level Elemente. Ein block-level Element wird so formatiert, dass sein Umriß immer ein (einziges) Rechteck bildet, während ein inline Element in mehrere Rechtecke aufgeteilt werden kann, die in verschiedenen Zeilen dargestellt werden.

Block-level Elemente

Block-level Elemente werden so plaziert, als ob vor und nach dem Element ein Zeilenvorschub eingefügt wird. Sie beginnen also in einer neuen Zeile und das darauf folgende Element kann auch frühestens in der ersten freien Folgezeile dargestellt werden.
Bestimmte CSS-Eigenschaften sind nur auf block-Level Elemente anwendbar.

Listen (list-item) Elemente

Listen Elemente können Aufzählungssymbole enthalten, werden aber im Prinzip wie bock-level Elemente formatiert.
Für Listen Elemente gibt es einige spezielle Eigenschaften.

Schwimmende (floating) Elemente

Schwimmende Elemente sind Elemente, deren Plazierung außerhalb des normalen Textflußes erfolgt. Sie werden wie block-level Elemente in einem Rechteck dargestellt und können am rechten oder linken Rand des übergeordneten block-level Elements ausgerichtet werden (Sie "schwimmen" im Textfluß an den Rand). Wenn an einer Seite eines schwimmenden Elements genügend Raum vorhanden ist, können Elemente dort plaziert werden.

Die auf schwimmende Elemente anwendbaren Eigenschaften sind diesselben wie die für block-level Elemente.

Inline Elemente

Wenn ein inline Element nicht in eine Zeile paßt, wird es getrennt (Zeilenumbruch). Es wird also in zwei Rechtecke geteilt, wobei das zweite Rechteck an den Anfang der Folgezeile plaziert wird.
Sind für ein inline Element Ränder- bzw. Rahmenbreiten definiert (s.o.), so bleiben diese an der Stelle, an der der Zeilenumbruch erfolgt, unberücksichtigt.
Mehrere inline Elemente werden innerhalb einer Zeile aufgereiht, bis die horizontale Grenze des übergeordneten Elements erreicht ist und eine neue Zeile begonnen werden muß.

Ersetzte (replaced) Elemente

Ersetzte Elemente sind Elemente, deren Inhalt aus externen Quellen geladen wird (Das Element wird durch einen geladenen Inhalt ersetzt). Z.B. wird der Inhalt des IMG Elements aus einer Bilddatei entnommen.

Ersetzte Elemente können entweder block-level oder inline Elemente sein.