nach oben gehen
von: Steffen Domaschke - veröffentlicht: 19.08.2021
Webseiten Netz
css3-logo

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

In diesem Tutorial lernen Sie, wie Sie die Breite und Höhe eines Elements mit CSS festlegen können.

Webseiten Netz

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:

Gesamtbreite = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right

Gesamthöhe = height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom

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.

Hinweis: Wenn der min-width-Wert mit einem höheren Wert als dem von max-width angegeben wird, wird in diesem Fall min-width als der geltende Wert verwendet und max-width ignoriert.

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.

Hinweis: Wenn der min-height-Wert mit einem höheren Wert als dem von max-height angegeben wird, wird in diesem Fall min-height als der geltende Wert verwendet und max-height ignoriert.

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.

Hinweis: min-width wird verwendet, um sicherzustellen, dass ein Element mindestens eine Mindestbreite hat, auch wenn kein Inhalt vorhanden ist. Das Element darf jedoch normal wachsen, wenn sein Inhalt die eingestellte Mindestbreite überschreitet.

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.

Hinweis: min-height wird verwendet, um sicherzustellen, dass ein Element mindestens eine Mindesthöhe hat, auch wenn kein Inhalt vorhanden ist. Das Element darf jedoch normal wachsen, wenn sein Inhalt die eingestellte Mindesthöhe überschreitet.

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

Elements 300px und es kann sich horizontal auf maximal 500px erstrecken.

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

Ebenso können Sie einen Höhenbereich für ein Element definieren. Im Beispiel unten beträgt die minimale Höhe des <div>Elements 300px. Es kann sich vertikal bis zu maximal 500px erstrecken.

div {
    min-height: 300px;
    max-height: 500px;
}
Internetagentur SEO Lausitz Webdesign, Webseiten erstellen, Betreuung und Wartung von Webseiten, WP Support Anonym hat 5,00 von 5 Sternen 13 Bewertungen auf ProvenExpert.com

Kontaktieren Sie uns - wir sind gern für Sie da!

css, webdesign, css3, css tutorial, css width, css height, css min-width, css max-width, css min-height, css max-height, css lernen, webdesign