CSS lernen - Die Breite und Höhe eines Elements mit CSS festlegen

Die Abmessung eines Elements definieren

CSS hat mehrere Dimensionseigenschaften wie width, height, max-width, min-width, max-height und min-height. Diese ermöglicht es Ihnen, die Breite und Höhe eines Elements zu steuern. In den folgenden Abschnitten wird beschrieben, wie Sie diese Eigenschaften verwenden, um ein besseres Webseiten-Layout zu erstellen.

Die Breite und Höhe der Elemente

Die width- und height-Eigenschaft definiert die Breite und Höhe des Inhaltsbereichs eines Elements. Diese Breite und Höhe beinhaltet keine Auffüllungen, Rahmen oder Ränder. Sehen Sie sich das CSS-Boxmodell an, wenn Sie sich nochmal über die einzelnen Bestandteile eines HTML-Elements informieren wollen.

Als Wiederholung noch einmal die Berechnung der Gesamtbreite und der Gesamthöhe:

Hier ein Beispiel zur Angabe der Höhe und Breite eines <div>-Elements:

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

In diesem Beispiel geben wir die feste Breite von 300 Pixeln und eine Höhe von 300 Pixeln an. Es ist aber möglich auch andere Maßangaben zu setzen:

• Länge - gibt eine Breite in px, em, rem, pt, cm usw. an.
• % - gibt eine Breite in Prozent (%) der Breite des enthaltenden Elements an.
• auto - der Browser berechnet eine passende Breite für das Element.
• initial - Setzt die Breite und Höhe auf den ursprünglichen Standardwert (meist auto).
• inherit - gibt an, dass die Breite vom übergeordneten Element geerbt werden soll..

Einstellen der maximalen Breite und Höhe

Mit der max-width- und der max-height-Eigenschaft können Sie die maximale Breite und Höhe des Inhaltsbereichs angeben. Auch diese maximale Breite und Höhe umfasst keine Abstände, Rahmen oder Ränder.

Ein Element kann nicht breiter als der max-width-Wert sein, selbst wenn der width-Wert auf einen höheren Wert gesetzt ist. Wenn beispielsweise width:300px; aber max-width:200px; gesetzt wurde, beträgt die finale Breite des Elements 200px.

Gleiches gilt auch für die Höhe eines Elements. Ein Element mit einer max-height wird niemals größer als der angegebene Wert sein, selbst wenn der height-Wert auf einen höheren Wert gesetzt ist. Wenn beispielsweise height: 200px; und max-height:100px; gesetzt wurde, beträgt die tatsächliche Höhe des Elements 100px.

Einstellen der Mindestbreite und -höhe von Elementen

Sie können die min-width und min-height-Eigenschaft verwenden, um die Mindestbreite und -höhe des Inhaltsbereichs anzugeben. Diese Mindestbreite und -höhe umfasst wieder kein Padding (Innenabstand), Margin (Außenabstand) oder Border(Rand/Rahmen).

Ein Element kann nicht schmaler als der min-width-Wert werden. Selbst wenn der width-Wert kleiner ist. Wenn beispielsweise width:300px; und min-width:400px; gesetzt wurde, beträgt die tatsächliche Breite des Elements 400px. Es verhält sich hierbei also genauso wie bei den Maximalbreiten und Maximalhöhen.

Selbiges trifft auch wieder auf die Höhe zu. Ein Element was eine min-height hat, kann niemals kleiner als der angegebene Wert sein. Auch dann nicht, wenn als Höhe ein geringerer Wert eingestellt wurde. Wenn beispielsweise height:200px; und min-height:300px; gesetzt wurde, beträgt die tatsächliche Höhe des Elements trotzdem 300px.

Einstellen eines Breiten- und Höhenbereichs

Die min-width und min-height-Eigenschaften werden oft in Kombination mit max-width und max-height-Eigenschaften verwendet, um einen Breiten- und Höhenbereich für ein Element zu erzeugen.

Dies kann sehr nützlich sein, um ein flexibles Design zu erstellen. Im folgenden Beispiel wäre die minimale Breite des

div {
    min-width: 300px;
    max-width: 500px;
}

div {
    min-height: 300px;
    max-height: 500px;
}