Lektion 12: Breite und Höhe

Bisher haben wir uns noch nicht viel um die Größe der Elemente, mit denen wir gearbeitet haben, gekümmert. In dieser Lektion werden wir sehen, wie einfach man Breite (width) und Höhe (height) eines Elementes einstellen kann.

• width
• height

Festlegen der Breite: die Eigenschaft ‘width’

Mit der Eigenschaft width, kann man die gewünschte Breite eines Elementes angeben.

Diese einfache Beispiel erstellt eine Box, in der Text dargestellt werden kann:

	
	div.box {
	  width: 200px;
	  border: 1px solid black;
	  background: orange;
	}
	
	

• Beispiel anzeigen

Festlegen der Höhe: die Eigenschaft ‘height’

Im obigen Beispiel wird die Höhe der Box durch ihren Inhalt bestimmt. Man kann aber die Höhe eines Elementes auch mit der Eigenschaft height beeinflussen. Als Beispiel weisen wir der Box aus unserem Beispiel eine Höhe von 500 Pixel zu:

	
	div.box {
	  height: 500px;
	  width: 200px;
	  border: 1px solid black;
	  background: orange;
	}
	
	

• Beispiel anzeigen

Zusammenfassung

Die Lektionen 9, 10, 11 und 12 gaben eine Einführung in das Box-Modell von CSS. Vielleicht haben Sie bisher Tabellen in HTML benutzt um Ihre Layouts zu erstellen. Mit dem Box-Modell von CSS sollten Sie nun in der Lage sein, elegante Layouts präziser und in Übereinstimmung mit den Empfehlungen des W3C zu erstellen.

<< Lesson 11: Umrandung (border)

Lesson 13: Schwimmende Positionierung von Elementen (float) >>