css mit Adi Prinz

CSS-Einheiten: Allgemeine Beschreibung

CSS-Einheiten sind Maßeinheiten, die verwendet werden, um die Größe von Elementen, Schriftarten, Abständen und anderen Layout-Eigenschaften auf Webseiten zu definieren. Diese Einheiten ermöglichen es Entwicklern, präzise und flexible Designs zu erstellen, die sich an verschiedene Bildschirmgrößen und Auflösungen anpassen.

Absolute Längen

Die absoluten Längeneinheiten sind festgelegt, und eine Länge, die in einer dieser Einheiten ausgedrückt wird, wird als genau diese Größe angezeigt.

Absolute Längeneinheiten werden für die Verwendung auf dem Bildschirm nicht empfohlen, da die Bildschirmgrößen so stark variieren. Sie können jedoch verwendet werden, wenn das Ausgabemedium bekannt ist, wie z.B. Was das Drucklayout betrifft.

Einheit Beschreibung
cm Zentimeter
mm Millimeter
in Zoll (1in = 96px = 2,54cm)
px * Pixel (1px = 1/96 Zoll)
pt Punkte (1pt = 1/72 Zoll)
pc Picas (1pc = 12 pt)

* Pixel (px) beziehen sich auf das Anzeigegerät. Bei Geräten mit niedrigen DPI-Werten ist 1 Pixel ein Gerätepixel (Punkt) des Displays. Für Drucker und hohe Auflösung Bildschirme 1px impliziert mehrere Gerätepixel.

Relative Längen

Relative Längeneinheiten geben eine Länge relativ zu einer anderen Längeneigenschaft an. Relative Längeneinheiten skalieren besser zwischen verschiedenen Rendering-Medien.

Einheit Beschreibung
em Relativ zur Schriftgröße des Elements (2em bedeutet 2-mal so groß wie die aktuelle Schriftgröße)
ex Relativ zur x-Höhe der aktuellen Schrift (selten verwendet)
ch Relativ zur Breite der Ziffer "0"
rem Relativ zur Schriftgröße des Wurzelelements
vw Relativ zu 1% der Breite des Viewports*
vh Relativ zu 1% der Höhe des Viewports*
vmin Relativ zu 1% der kleineren Dimension des Viewports*
vmax Relativ zu 1% der größeren Dimension des Viewports*
% Relativ zum übergeordneten Element

* Viewport bezeichnet den sichtbaren Bereich der Webseite.

CSS-Einheiten für Ansichtshöhe

Die folgenden CSS-Einheiten beziehen sich auf verschiedene Aspekte der Höhe des Ansichtsfensters (Viewport).

Die CSS-Einheiten dvh, svh und lvh sind relativ neue Ergänzungen und werden möglicherweise nicht von allen Browsern vollständig unterstützt. (Stand August 2024):

Einheit Beschreibung
dvh Dynamische Ansichtshöhe (bezieht sich auf die Höhe des Ansichtsfensters ohne die Browser-UI-Elemente, die sich ändern können)
svh Statische Ansichtshöhe (bezieht sich auf die Höhe des Ansichtsfensters einschließlich der statischen Browser-UI-Elemente)
lvh Große Ansichtshöhe (bezieht sich auf die höchste mögliche Höhe des Ansichtsfensters, die bei versteckten oder minimierten UI-Elementen erreicht wird)

Innenabstände

Innenabstand (padding) ist der Abstand zwischen dem Inhalt eines Elements und seinem Elementrand. Inhalt kann in diesem Fall alles mögliche sein z.B. Text, Bilder Videos usw.

Eigenschaft Bedeutung Wertzuweisung
padding-top Innenabstand oben Längenangabe, Prozentangabe, initial, inherit
padding-right Innenabstand rechts Längenangabe, Prozentangabe, initial, inherit
padding-bottom Innenabstand unten Längenangabe, Prozentangabe, initial, inherit
padding-left Innenabstand links Längenangabe, Prozentangabe, initial, inherit
padding Zusammenfassung padding-top padding-right padding-bottom padding-left
padding-block Innenabstand oben und unten Längenangabe, Prozentangabe, initial, inherit
padding-inline Innenabstand links und rechts Längenangabe, Prozentangabe, initial, inherit
padding-block-start Innenabstand oben Längenangabe, Prozentangabe, initial, inherit
padding-block-end Innenabstand unten Längenangabe, Prozentangabe, initial, inherit
padding-inline-start Innenabstand links Längenangabe, Prozentangabe, initial, inherit
padding-inline-end Innenabstand rechts Längenangabe, Prozentangabe, initial, inherit

padding-top, padding-right, padding-bottom, padding-left

Mit den Eigenschaften padding-top, padding-right, padding-bottom und padding-left definieren sie Innenabstände oben, rechts, unten und lins, padding-Attribute sind nicht vererbbar.

Mögliche Werte für padding

  • Längenangabe: (z.B. Pixel, em)
  • Prozentwerte
p { padding-top: 10px;  padding-right: 15px;  padding-bottom: 10px;  padding-left: 15px; }

padding als Zusammenfassung

Mit der padding-Eigenschaften können sie alle vier Innenabstände in einem Attribut festlegen. padding kann ein, zwei, drei oder vier Attributwerte zugewiesen bekommen. Achtung auf die Reihenfolge.

  1. Ein Wert: alle vier Innenabstände erhalten denselben Abstand
  2. Zwei Werte: oben und unten, links und rechts
  3. Drei Werte: oben, links und rechts, unten
  4. Vier Werte: oben, rechts, unten, links
p { padding: 10px; }

Außenabstände

Außenabstand (padding) ist der Abstand zwischen dem aktuellen Element und seinem Eltern- bzw. seinen Nachbarelementen.

Eigenschaft Bedeutung Wertzuweisung
margin-top Außenabstand oben Längenangabe, Prozentangabe, auto, initial, inherit
margin-right Außenabstand rechts Längenangabe, Prozentangabe, auto, initial, inherit
margin-bottom Außenabstand unten Längenangabe, Prozentangabe, auto, initial, inherit
margin-left Außenabstand links Längenangabe, Prozentangabe, auto, initial, inherit
margin Außenabstand margin-top margin-right margin-bottom margin-left
margin-block Außenabstand oben und unten Längenangabe, Prozentangabe, initial, inherit
margin-inline Außenabstand links und rechts Längenangabe, Prozentangabe, initial, inherit
margin-block-start Außenabstand oben Längenangabe, Prozentangabe, initial, inherit
margin-block-end Außenabstand unten Längenangabe, Prozentangabe, initial, inherit
margin-inline-start Außenabstand links Längenangabe, Prozentangabe, initial, inherit
margin-inline-end Außenabstand rechts Längenangabe, Prozentangabe, initial, inherit

margin-top, margin-right, margin-bottom, margin-left

Mit den Eigenschaften margin-top, margin-right, margin-bottom und margin-left definieren sie Außenabstände oben, rechts, unten und lins, margin-Attribute sind nicht vererbbar.

Mögliche Werte für margin

  • Längenangabe: (z.B. Pixel, em)
  • Prozentwerte
  • aoto: horizontale Zentrierung im Elternelement
p { margin-top: 10px  margin-right: 15px  margin-bottom: 10px  margin-left: 15px }

margin als Zusammenfassung

Mit der margin-Eigenschaften können sie alle vier Außenabstände in einem Attribut festlegen. margin kann ein, zwei, drei oder vier Attributwerte zugewiesen bekommen. Achtung auf die Reihenfolge.

  1. Ein Wert: alle vier Außenabstände erhalten denselben Abstand
  2. Zwei Werte: oben und unten, links und rechts
  3. Drei Werte: oben, links und rechts, unten
  4. Vier Werte: oben, rechts, unten, links
p { margin: 10px auto; }

Breite & Höhe

Breite und Höhe eines Block-Elements passen sich standardmäßig automatisch an den Inhalt an. Sollte der Platz im Browser zu klein sein, blendet dieser einen Scrollbalken ein. Inline-Elemente können eine Breite haben, Höhen werden mit line-height geschrieben. Mit dem Attribut overflow können sie weitere Einstellungen machen. Mit den Attributen width und height können sie benutzerdefinierte Abmessungen erstellen.

Eigenschaft Bedeutung Wertzuweisung
height Höhe auto, Längenangabe, Prozentangabe, initial, inherit
width Breite auto, Längenangabe, Prozentangabe, initial, inherit
max-height Maximale Höhe none, Längenangabe, Prozentangabe, initial, inherit
max-width Maximale Breite none, Längenangabe, Prozentangabe, initial, inherit
min-height Minimale Höhe Längenangabe, Prozentangabe, initial, inherit
min-width Minimale Breite Längenangabe, Prozentangabe, initial, inherit

height

Die benutzerdefinierte Höhe von Block-Elementen, Bilder Videos usw. werden mit der height-Eigenschaft geschrieben, height ist nicht vererbbar.

Mögliche Werte für height

  • Längenangabe: (z.B. Pixel, em)
  • Prozentwerte
  • aoto: (Standard)
p { height: 5em; }

width

Die benutzerdefinierte Breite von Container-Boxen, Bilder Videos usw. werden mit der width-Eigenschaft geschrieben, width ist nicht vererbbar.

Mögliche Werte für width

  • Längenangabe: (z.B. Pixel, em)
  • Prozentwerte
  • aoto: (Standard)
p { width: 60%; }

max-width, max-height

Mit max-width, max-height teilen sie dem Browser die maximale Höhe und Breite mit, max-width und max-height sind nicht vererbbar.

Mögliche Werte für max-width und max-heigh

  • Längenangabe: (z.B. Pixel, em)
  • Prozentwerte
  • none: keine maximale Höhe oder Breite (Standard)
p { max-width: 60%; max-height: none; }

min-width, min-height

Mit min-width, min-height teilen sie dem Browser die maximale Höhe und Breite mit, min-width und min-height sind nicht vererbbar.

Mögliche Werte für min-width und min-heigh

  • Längenangabe: (z.B. Pixel, em)
  • Prozentwerte
p { min-width: 200px; min-height: 200px; }

Verwendung von min() max() und clamp()

In CSS sind min und max keine eigenständigen Attribute, sondern Präfixe für verschiedene Eigenschaften, die die Mindest- bzw. Höchstwerte festlegen,

  • min(): Gibt den kleineren von zwei oder mehr Werten zurück.
  • max(): Gibt den größeren von zwei oder mehr Werten zurück.
  • Die Funktion clamp() wird verwendet, um einen Wert zwischen einem Mindestwert, einem bevorzugten Wert und einem Höchstwert einzuschränken.
width: min(300px, 50%);
/* Die Breite beträgt mindestens 300px oder 50% des Container-Elements, je nachdem, welcher Wert kleiner ist. */

width: max(300px, 50%);
/* Die Breite beträgt maximal 300px oder 50% des Container-Elements, je nachdem, welcher Wert größer ist. */

width: clamp(200px, 50%, 500px);
/* Die Breite beträgt mindestens 200px, höchstens 50% des Container-Elements oder maximal 500px, 
je nachdem, welcher Wert zwischen diesen Grenzen liegt. */

Overflow

Wenn der Bereich einer Box nicht ausreicht um den Inhalt darzustellen, werden normalerweise Scrolleisten eingeblendet. Mit der overflow-Eigenschaft stehen weitere Einstellungen zur verfügung.

Eigenschaft Bedeutung Wertzuweisung
overflow steuert übergroße Inhalte in Breite und Höhe visible, hidden, scroll, auto, initial, inherit
overflow-x steuert übergroße Breite visible, hidden, scroll, auto, initial, inherit
overflow-y steuert übergroße Höhe visible, hidden, scroll, auto, initial, inherit

overflow

Mit dem overflow-Attribut steuern sie das Verhalten von übergroßen Inhalt. Der Inhalt kann beschnitten, scrollbar oder sichtbar sein.

Mögliche Werte für overflow

  • visible: Inhalt wird nicht abgeschnitten (Standard)
  • hidden: Inhalt wird abgeschnitten
  • scroll: Inhalt wird abgeschnitten, Scrollbar ist eingeblendet
  • auto: Inhalt wird abgeschnitten, Scrollbar wenn notwendig
div {
     width: 200px;
     height: 200px;
     overflow: hidden;
 }

overflow-x

Mit dem overflow-x Attribut steuern sie das Verhalten von übergroßen Inhalt in der Breite. Der Inhalt kann beschnitten, scrollbar oder sichtbar sein.

Mögliche Werte für overflow-x

  • visible: Inhalt wird nicht abgeschnitten (Standard)
  • hidden: Inhalt wird abgeschnitten
  • scroll: Inhalt wird abgeschnitten, Scrollbar ist eingeblendet
  • auto: Inhalt wird abgeschnitten, Scrollbar wenn notwendig
div {
     width: 200px;
     overflow-x: scroll;
 }

overflow-y

Mit dem overflow-y Attribut steuern sie das Verhalten von übergroßen Inhalt in der Höhe. Der Inhalt kann beschnitten, scrollbar oder sichtbar sein.

Mögliche Werte für overflow-y

  • visible: Inhalt wird nicht abgeschnitten (Standard)
  • hidden: Inhalt wird abgeschnitten
  • scroll: Inhalt wird abgeschnitten, Scrollbar ist eingeblendet
  • auto: Inhalt wird abgeschnitten, Scrollbar wenn notwendig
div {
     height: 200px;
     overflow-y: auto;
 }