css mit Adi Prinz

Absolute Längen

Absolute Längeneinheiten sind fest definiert. Für Bildschirmlayouts wird meistens px verwendet. Physische Einheiten wie cm oder pt eignen sich vor allem für Drucklayouts. Ein CSS-Pixel entspricht nicht zwingend genau einem Gerätepixel.

Schriftbezogene relative Längen

html {
  font-size: 16px;
}

h2 {
  margin-block-end: 1rem;
}
    

Viewport-Einheiten

Viewport-Einheiten beziehen sich auf den sichtbaren Bereich des Browsers. Ein Wert von 1vw entspricht einem Prozent der Viewport-Breite und 1vh einem Prozent der Viewport-Höhe.

Small, Large und Dynamic Viewport

Auf mobilen Geräten verändert die ein- oder ausgeblendete Browseroberfläche die verfügbare Höhe. Dafür stehen die Varianten sv*, lv* und dv* zur Verfügung. Sie gelten nicht nur für die Höhe, sondern beispielsweise auch als svw, lvw und dvw.

.page {
  min-height: 100dvh;
}
    

Prozentwerte

Prozentwerte beziehen sich nicht immer allgemein auf das Elternelement. Die Bezugsgröße hängt von der verwendeten Eigenschaft ab. Bei width beziehen sie sich normalerweise auf die Breite des umschließenden Blocks. Bei padding und margin beziehen sich Prozentwerte auch in Block-Richtung auf dessen Inline-Größe, bei horizontaler Schreibrichtung also auf die Breite.

Container-Query-Einheiten

Container-Query-Einheiten beziehen sich auf die Größe eines Query-Containers. Dadurch kann sich eine Komponente an ihren verfügbaren Platz anpassen und nicht nur an den gesamten Viewport.

• cqw: 1 % der Container-Breite
• cqh: 1 % der Container-Höhe
• cqi: 1 % der Container-Größe in Inline-Richtung
• cqb: 1 % der Container-Größe in Block-Richtung
• cqmin: der kleinere Wert von cqi und cqb
• cqmax: der größere Wert von cqi und cqb

.card-wrapper {
  container-type: inline-size;
}

.card-title {
  font-size: clamp(1rem, 5cqi, 2rem);
}
    

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

Mit den vier Einzeleigenschaften werden die Innenabstände für jede physische Seite getrennt festgelegt.

p {
  padding-top: 10px;
  padding-right: 15px;
  padding-bottom: 10px;
  padding-left: 15px;
}
    

padding als Kurzschreibweise

padding kann ein bis vier Werte enthalten. Bei vier Werten verläuft die Reihenfolge im Uhrzeigersinn: oben, rechts, unten, links.

1. Ein Wert: alle vier Seiten
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 15px;
}
    

Logische padding-Eigenschaften

Logische Eigenschaften orientieren sich an Schreibrichtung und Textfluss. padding-inline steht in einer deutschsprachigen horizontalen Schreibrichtung für links und rechts, padding-block für oben und unten.

.box {
  padding-block: 1rem;
  padding-inline: 2rem;
}
    

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

Mit den vier Einzeleigenschaften werden die Außenabstände für jede physische Seite getrennt festgelegt.

p {
  margin-top: 10px;
  margin-right: 15px;
  margin-bottom: 10px;
  margin-left: 15px;
}
    

margin als Kurzschreibweise

Die Reihenfolge der ein bis vier Werte entspricht der Reihenfolge bei padding: oben, rechts, unten und links.

.box {
  margin: 10px 20px 30px;
}
    

Zentrieren mit margin: auto

Ein Blockelement mit einer kleineren Breite als sein umschließender Block kann mit automatischen Außenabständen in Inline-Richtung horizontal zentriert werden.

.box {
  width: min(100% - 2rem, 60rem);
  margin-inline: auto;
}
    

Zusammenfallende Außenabstände

Vertikale Außenabstände von Blockelementen können im normalen Dokumentfluss zusammenfallen. Dabei werden die Abstände nicht einfach addiert. Dieses sogenannte Margin Collapsing tritt beispielsweise zwischen aufeinanderfolgenden Absätzen auf, nicht aber bei Flexbox- oder Grid-Elementen.

width und height

width legt die Breite und height die Höhe fest. Der Standardwert auto überlässt die Berechnung dem Browser. Prozentuale Höhen funktionieren nur, wenn die maßgebliche Höhe des umschließenden Blocks bestimmt werden kann.

.box {
  width: 60%;
  height: 12rem;
}
    

min-width, max-width, min-height und max-height

Die min-*-Eigenschaften bestimmen eine Mindestgröße, die max-*-Eigenschaften eine Höchstgröße. Mindestwerte haben Vorrang vor Höchstwerten und festen Größen.

img {
  max-width: 100%;
  height: auto;
}

.panel {
  min-height: 200px;
}
    

Logische Größen

inline-size und block-size richten sich nach der Schreibrichtung. In einer horizontalen Schreibrichtung entsprechen sie meist width und height. Dazu gehören auch min-inline-size, max-inline-size, min-block-size und max-block-size.

.article {
  inline-size: min(100%, 70ch);
  margin-inline: auto;
}
    

min-content, max-content und fit-content

• min-content: kleinstmögliche Größe ohne vermeidbaren Überlauf
• max-content: bevorzugte Größe ohne Zeilenumbrüche
• fit-content: an den verfügbaren Platz angepasste intrinsische Größe
• fit-content(...): Funktionsschreibweise mit einer Obergrenze, besonders bei Grid-Tracks

.label {
  width: fit-content;
}
    

aspect-ratio

Mit aspect-ratio wird ein bevorzugtes Verhältnis zwischen Breite und Höhe festgelegt. Besonders praktisch ist die Eigenschaft für Bilder, Videos, Karten und Platzhalter.

.video {
  width: 100%;
  aspect-ratio: 16 / 9;
}
    

box-sizing

Beim Standardwert content-box gelten width und height nur für den Inhaltsbereich. Mit border-box sind Innenabstände und Rahmen bereits in der angegebenen Breite und Höhe enthalten.

*,
*::before,
*::after {
  box-sizing: border-box;
}