CSS Schnellstart – Höhe,Breite und Maßeinheiten
Wenn du mal die Höhe und Breite eines Elementes verändern willst, solltest du ein paar Dinge beachten. Leider gibt es da in CSS ein paar Besonderheiten, bei denen man sich schnell wundern kann, warum die Größe trotz Eigenschaften doch nicht passt.
Die ersten beiden Eigenschaften, die du verwenden kannst sind logisch:
- height für die Höhe
- width für die Breite
Die Werte können in verschiedenen Varianten angegeben werden. Gibst du keine Höhe und Breite an, wird diese Größe automatisch bestimmt. Das hängt meistens vom Elternelement und dem verfügbaren Platz im Browserfenster ab.
WICHTIG: Die Höhe und Breite wird immer OHNE padding, border und margin berücksichtigt! Diese Werte müssen noch hinzugerechnet werden.
Und nun hast du die Qual der Wahl. Du kannst zwischen diversen Größeneinheiten wählen, vom Pixel bis hin zur prozentualen Angabe.
Dabei kannst du absolute oder relative Angaben machen.
Absolute Größeneinheit
Möchtest du einen festen Wert setzen, der immer so bleibt, egal wie sich die Elemente drumherum verhalten oder wie groß der Bildschirm bzw. Browser ist, verwendest du absolute Werte. Hier die gängigsten absoluten Einheiten:
| Einheit | CSS-Name | Beschreibung | Beispiel |
| Pixel | px | Ein Pixel. Kleinste darstellbare Einheit auf einem Bildschirm, abhängig von Auflösung und Dichte | width:50px; |
| Zoll | in | Ein Zoll (2,54 cm) | width:2in; |
| Pica | pc | Eine Pica (1/6 Zoll) | width:15pc; |
| Punkt | pt | Ein Punkt (1/72 Zoll) | width:45pt; |
| Zentimeter | cm | Ein Zentimeter (1/100 Meter) | width:10cm; |
| Millimeter | mm | Ein Millimeter (1/1000 Meter) | width:950mm; |
WARNUNG: Verwende absolute Werte nur, wenn du dir wirklich sicher bist, dass es dem responsiven Verhalten deiner Webseite/Webanwendung nicht schadet! Diese Werte sind eigentlich nur für das Drucken wichtig.
Relative Größeneinheit
Wesentlich öfter wirst du diese Einheiten nutzen. Relative Werte hängen immer von der Umgebung ab. Dies ist sinnvoll, damit sich deine Webseitendarstellung an die Gegebenheiten, wie z.B. Bildschirmgröße, oder verfügbarer Platz im Eltern-Element anpassen kann. Das sind die wichtigsten Einheiten:
| Einheit | CSS-Name | Beschreibung | Beispiel |
| Prozent | % | Prozentuale Angabe | width:100%; |
| Schriftbreite "M" | em | Berechnete Schriftgröße des Browsers | width:10em; |
| Viewport-Breite | vw | 1/100 der Breite des Anzeigebereiches | width:100vw; |
| Viewport-Höhe | vh | 1/100 der Höhe des Anzeigebereiches | width:100vh; |
| Min Viewporteinheit | vmin | 1/100 der kleineren Seite des Anzeigebereiches | width:100vmin; |
| Max Viewporteinheit | vmax | 1/100 der größeren Seite des Anzeigebereiches | width:100vmax; |
WICHTIG: Diese Größeneinheiten können auch in anderen Eigenschaften verwendet werden. In den nächsten Lektionen werden wir diese auf andere Eigenschaften anwenden!
Lass und mal diese Einheiten mit der Breite kombinieren. In Aktion sieht das wie folgt aus: