6.4.1 Größe von Elementen

In CSS können wir die Größe von Elementen flexibel anpassen, indem wir deren Breite und Höhe definieren. Dieses Verständnis ist essenziell für die Arbeit mit dem Box-Modell.

Breite (width) und Höhe (height)

Breite eines Elements (width)

Die width-Eigenschaft legt die Breite eines Elements fest und kann auf nahezu alle HTML-Elemente angewendet werden. Typische Werte sind numerische Angaben mit Einheiten wie px, em oder %, oder das Schlüsselwort auto für eine automatische Breite.

Beispiel:

1
width: 200px;

Um die Breite eines Elements weiter zu steuern, können wir min-width und max-width verwenden, um Mindest- bzw. Maximalbreiten festzulegen.

Beispiel:

1
2
min-width: 150px;
max-width: 425px;

Höhe eines Elements (height)

Ähnlich wie width legt die height-Eigenschaft die Höhe eines Elements fest. Auch hier sind numerische Werte mit Einheiten oder auto möglich.

Beispiel:

1
height: 800px;

Mit min-height und max-height können wir Mindest- und Maximalhöhen definieren.

Beispiel:

1
2
min-height: 600px;
max-height: 768px;

Box-sizing

Standardmäßig wird in CSS das content-box-Modell verwendet. Dabei umfasst die angegebene Breite (width) nur den Inhalt des Elements, ohne den Innenabstand (Padding) und den Rahmen (Border). Das bedeutet, dass die tatsächliche Breite des Elements größer sein kann als die definierte width, da Padding und Border hinzugerechnet werden. Erläuterungen zu Padding und Border kommen ein paar Seiten später.

Um die Berechnung zu vereinfachen und sicherzustellen, dass die angegebene Breite auch den Innenabstand und den Rahmen einschließt, können wir die Eigenschaft box-sizing auf border-box setzen. Dadurch werden Padding und Border innerhalb der definierten Breite berücksichtigt.

Beispiel: 

1
box-sizing: border-box;

Responsive Design und relative Einheiten

Für ein responsives Design ist es empfehlenswert, relative Einheiten wie Prozent (%) oder Viewport-Einheiten (vw, vh) zu verwenden, um die Größe von Elementen flexibel an verschiedene Bildschirmgrößen anzupassen.

Viewport

Der Viewport bezeichnet den sichtbaren Bereich einer Webseite im Browserfenster. Die Größe des Viewports variiert je nach Gerät und Fenstergröße. Weitere Informationen zum Viewport finden Sie in der MDN Web Docs.

  • vw (Viewport Width): 1 vw entspricht 1 % der Breite des sichtbaren Bereichs des Browsers.
  • vh (Viewport Height): 1 vh entspricht 1 % der Höhe des sichtbaren Bereichs des Browsers.

Durch die Verwendung dieser Einheiten passen sich Elemente dynamisch an die Größe des Browserfensters an, was besonders bei unterschiedlichen Bildschirmgrößen von Vorteil ist.

Beispiel

1
2
width: 50vw;
height: 50vh;

In diesem Beispiel nimmt das Element 50 % der verfügbaren Breite und 50 % der verfügbaren Höhe des Viewports ein.