Zu den grundlegendsten Gestaltungsmitteln gehören Größe und Abstände. Mit deren Behandlung in CSS wollen wir uns in diesem Kapitel beschäftigen. Elemente werden hierbei als Boxen aufgefasst, welche (von innen nach außen) einen Inhaltsbereich, einen Innenabstand, einen Rahmen und einen Außenabstand haben können. Den Inhaltsbereich schauen wir uns gleich in diesem Abschnitt an, die andere drei Eigenschaften bekommen jeweils einen eigenen Abschnitt.

Für dieses Kapitel verwenden wir das <div>-Element im HTML-Dokument. Dieses hat keine inhaltliche Bedeutung und bekommt auch keine besondere Gestaltung von Browsern zugeschrieben. Der HTML-Code innerhalb des <body>-Tags soll nur aus folgender Zeile bestehen:

<div id="box">Ich bin eine Box!</div>

Diesem Element können wir nun eine Breite und eine Höhe zuordnen. Das funktioniert mit dem CSS-Code:

#box {
	background-color: red;
	width: 300px;
	height: 50px;
}

Diese Angaben beziehen sich nun auf den Inhaltsbereich des Elements. Damit haben wir noch nicht gesagt, in welchem Abstand zum Inhalt ein Rahmen positioniert wird, wenn wir einen Rahmen einstellen, und auch nicht, welchen Abstand andere Elemente von diesem Element haben, wenn wir sie in das HTML-Dokument einfügen. Um diese Dinge werden wir uns in den nächsten Abschnitten kümmern. Sieh dir jetzt erstmal dieses Beispiel im Browser an.

Aufgaben

  1. Variiere die Breiten- und Höhenangabe im obigen Beispiel. Was passiert, wenn die Breite zu gering für den Text wird?
  2. Sieh dir auch die Ergebnisse an, wenn du nur eine der beiden Angaben machst, also im CSS-Dokument nur die width- oder die height-Eigenschaft festlegst.