Es gibt bestimmte CSS-Attribute, die den "Kasten" beeinflussen, der ein HTML-Element auf Blockebene umgibt. Ein Element auf Blockebene (block-level) ist ein Element, dem eine beliebige Art Zeilenumbruch vorausgeht und folgt, wie etwa ein Absatz oder eine Überschrift.

Diese Attribute sind padding und border. Die border-Attribute steuern den Rahmen, der um so einen Kasten gezeichnet wird, und der normalerweise unsichtbar ist. Die padding-Attribute steuern, wieviel Abstand zwischen dem Rahmen (sichtbar oder nicht) und dem Elementinhalt eingehalten wird. Ränder sind die anderen CSS-Attribute, die das W3C als "Kasten"-Attribute betrachtet.

Der shortcut padding stellt eine abkürzende Technik dar, die Abstände für alle vier Seiten eines Elements gleichzeitig zu setzen. Der shortcut border ist eine Abkürzung für acht andere Attribute: border-color, border-width, border-style, border-top, border-left, border-right und border-bottom. Mit diesen Abkürzungen können Sie eine Farbe oder einen Stil auf alle Seiten gleichzeitig anwenden, oder Sie können alle Attribute jeweils auf eine Seite anwenden.

Durch die Einstellung dieser Attribute kann sich ein HTML-Dokument wirkungsvoll von einer Seite abheben. Die Attribute können auch genutzt werden, um Elemente auszurichten oder der Seite einen attraktiven 3D-Effekt zu verleihen. Das folgende Beispiel zeigt die Anwendung von CSS-Attributen für Rahmen, die auf verschiedene HTML-Elemente angewendet werden.

<STYLE type="text/css">  BODY { margin-left: 2.0in; margin-rigth: 05.in; color: magenta;   background-color: black; background-image: url(sidebar.jpg);   background-repeat: repeat-y; background-attachment: scroll}  P { padding: 5px }  .border1 { color: yellow; margin-left: -1.5in;   border-width: thin; border-style: groove;   border-color: orange; padding-top: 0.1in;   padding-left: 0.2in }  IMG { float: left; margin: -2.0in }  .border2 { border: ridge 5px lime }  UL { padding-left: 1.5in } </STYLE>

Um den Titel wird ein Rahmen gezogen, und sein Rand wird auf einen negativen Wert gesetzt, d.h., er wird nach links ausgerückt, nämlich neben die normale Randeinstellung für die Seite. das bewirkt, dass die Seitenleiste überlappt wird, so dass die Webseite einen in sich geschlosseneren Eindruck macht.
Ein weiterer Rahmen wird auf das Bild angewendet. Auch das Bild wird nach links in den Bereich der Seitenleiste verschoben. Die Absätze erhalten oben Abstände, um mehr Platz zwischen den Absatzelementen zu schaffen, ausserdem werden auch links von der ungeordneten Liste Abstände eingefügt, um damit die Liste innerhalb der Seite zu zentrieren.

Beispiel (Bitte beachten Sie auch hier die unterschiedliche Darstellungsweise der Browser)

Die Eigenschaften border, padding und margin stellen wichtige Techniken dar, Elementen Abstände hinzuzufügen, ohne dafür HTML-Tabellen oder transparente 1-Pixel-GIF-Dateien verwenden zu müssen.
Das Kapitel Layout und Positionierung erweitert diesen Ansatz. Dort werden die Positionierungsattribute gezeigt, ebenso wie die Möglichkeiten, Elemente damit direkt zu positionieren.