Breite und Höhe

Die Größe des Inhalts eines Elements wird mit zwei Eigenschaften festgelegt: width und height. So würden wir zum Beispiel alle Bilder 300 Pixel breit und 200 Pixel hoch machen:

img {
	width: 300px;
	height: 200px;
}

Die Einheit px ist ein Pixel, eine kleine feste Einheit. Auf einem gewöhnlichen Computerbildschirm ist ein Pixel ein Punkt des Bildschirms (schärfere Bildschirme, etwa die von Smartphones, verwenden mehrere Punkte für ein Pixel). Zum Vergleich: Ein Smartphone-Bildschirm ist meist etwa 360 bis 430 Pixel breit, ein Computerbildschirm oft 1280 bis 1920 Pixel.

Wenn wir Breite und Höhe nicht festlegen, berechnet der Browser sie selbst (ihr Standardwert ist auto): Eine Überschrift oder ein div ist so breit wie ihr Elternelement und so hoch, wie ihr Inhalt es braucht. Wenn wir sie festlegen, behält das Element diese Größe, auch wenn sein Inhalt mehr oder weniger Platz braucht.

Denke daran, dass width und height nur die Größe des Inhalts festlegen. Innenabstand und Rahmen kommen darum herum hinzu, wie das Bild in der vorigen Übung zeigt. Später in dieser Lektion sehen wir, wie man das ändert.