Webdesign mit (X)HTML und CSS

Breite: width

Eine Maßangabe für width regelt die Inhaltsbreite eines Elements. Der Wert auto lässt Block-Elemente die gesamte mögliche Breite einnehmen.

Prozentwerte beziehen sich auf die Breite des Elternelements.

Nicht-ersetzte Inline-Elemente können keine Breitenangabe bekommen (<a>, <span>, <em>, …).

Höhe: height

Eine Maßangabe für height regelt die Inhaltshöhe eines Elements. Mit dem Wert auto werden Block-Elemente so hoch, wie es der Inhalt erfordert.

Prozentwerte beziehen sich auf den height-Wert des Elternelements. Wenn das Elternelement keine explizite Höhenangabe hat, so wird der Wert auto verwendet.

Nicht-ersetzte Inline-Elemente können keine Höhenangabe bekommen.

Mindestbreite min-width und Maximalbreite max-width

Ein Blockelement, das keine oder eine Prozentbreite hat, ändert seine Breite je nach Größe des Browserfensters. Mit Angabe einer min-width wird dafür gesorgt, dass das Element unterhalb einer bestimmten Breite nicht mehr verkleinert wird.

Mit angabe einer max-width wächst die Breite eines Elements ab einer gewissen Fenstergröße nicht weiter – dies ist sinnvoll, um unlesbar lange Zeilen zu verhindern.

Mindesthöhe min-height und Maximalhöhe max-height

Ein Blockelement ohne Höhenangabe ist so hoch, wie es sein Inhalt erfordert. Mit min-height kann einem Element mit wenig Inhalt eine gewisse Mindesthöhe gegeben werden. Wenn der Inhalt mehr Platz beansprucht, als die Mindesthöhe vorsieht, so wächst das Element mit seinem Inhalt (im Unterschied zu height!).

Mit max-height wächst ein Element nur bis zu einer gewissen Höhe mit seinem Inhalt. Wenn der Inhalt größer wird, als die Maximalhöhe vorsieht, fließt der Inhalt in der Standardeinstellung über.