Die Längen von CSS

Es gibt ziemlich viele Eigenschaften in CSS, die eine Länge als Wert annehmen. Die Box-Modell-Eigenschaften sind die offensichtlichen: width, height, margin, padding, border. Aber auch viele andere: die Positionierung und Größe eines box-shadow oder die Größe und Abstände von Schriftarten. Was sind alle akzeptierten „Längen“-Eigenschaften in CSS? Es gibt ziemlich viele.

Absolute Längen

px

.wrap {
  width: 400px; 
}

Pixel haben nichts mit den tatsächlichen Bildschirm-Pixeln des Displays zu tun, das Sie gerade betrachten. Es ist eigentlich eine Winkelmessung.

Er soll ein Wert sein, der geräte- und displayübergreifend normalisiert ist, aber das stimmt immer weniger. Zum Beispiel werden Websites auf dem iPad mini genauso dargestellt wie auf dem iPad, was bedeutet, dass, wenn diese Werte in Pixeln gesetzt wären, diese Normierung ziemlich über Bord geworfen ist.

Pixel sind jedoch immer noch eine kanonische Messung im Web, da sie konsistent gehandhabt werden, viele andere Längen direkt auf Pixel abgebildet werden und JavaScript in Pixel spricht.

in

.wrap {
  width: 4in; 
}

Zoll sind eine physikalische Messung, aber im CSS-Land werden sie einfach direkt auf Pixel abgebildet. Fühlen Sie sich frei, Anwendungsfälle in den Kommentaren mitzuteilen, und ich werde sie hier hinzufügen, aber ich habe nie einen praktischen Anwendungsfall für diese oder die restlichen physikalischen Messungen gesehen.

1in == 96px

cm

.wrap {
  width: 20cm; 
}

Für den Großteil der Welt sind Zentimeter vertrauter und nützlicher als physische Messungen. Sie werden auch einfach auf Pixel abgebildet.

1cm == 37.8px

mm

.wrap {
  width: 200mm; 
}

Und eine Größenordnung kleiner…

1mm == 0.1cm == 3.78px

Schriftartrelative Längen

Em

.wrap {
  width: 40em; 
}

Eine relative Einheit. Ursprünglich eine typografische Messung, die auf dem Großbuchstaben „M“ der aktuellen Schriftart basiert. Obwohl sich die Länge nicht ändert, wenn Sie font-family ändern, ändert sie sich, wenn Sie font-size ändern.

Ohne jegliches CSS wäre 1em

1em == 16px == 0.17in == 12pt == 1pc == 4.2mm == 0.42cm

Wenn CSS die Schriftgröße ändert (auf beliebiger Ebene im Dokument), wird 1em zu dem, was die neue font-size ist.

Etwas umständlicher wird es, da sich Em-Einheiten bei der Anwendung auf font-size vervielfachen. Wenn also ein Element mit einer Schriftgröße von 1,1em innerhalb eines Elements mit einer Schriftgröße von 1,1em innerhalb eines weiteren Elements mit einer Schriftgröße von 1,1em liegt, beträgt die resultierende Größe 1,1 ✕ 1,1 ✕ 1,1 == 1,331rem (root em). Das bedeutet, selbst wenn ein Element beispielsweise auf 10em gesetzt ist, heißt das nicht, dass es überall, wo es vorkommt, eine einheitliche Breite hat. Es könnte breiter oder schmaler sein, wenn sich die font-size ändert (siehe Beweis).

Rem

.wrap {
  width: 40rem; 
}

Eine relative Einheit, ähnlich wie em, aber sie bezieht sich immer auf das „Root“-Element (d. h. :root {}) und nicht auf die Kaskade, wie es em tut. Dies vereinfacht die Arbeit mit relativen Einheiten erheblich.

Bemerkenswerte Browser-Unterstützungsprobleme: Funktioniert nicht in IE 8, Safari 4 oder iOS 3.2.

Punkte

.wrap {
  width: 120pt; 
}

Ein Punkt ist eine physische Messung, die 1/72 Zoll entspricht. Punkte sind die gebräuchlichste Art, Text außerhalb von CSS zu dimensionieren (wahrscheinlich der Grund, warum er in CSS unterstützt wird). Es ist immer noch gebräuchlich in der Sprache: „Natürlich haben sie diese wichtigen Informationen in winzigen Acht-Punkt-Schrift gesetzt!“.

Punkte sind am sinnvollsten in Print-Stylesheets zur Textgrößenbestimmung, wo physische Medien beteiligt sind, aber nichts hindert Sie daran, pt für Bildschirmmedien oder überall dort zu verwenden, wo eine Länge akzeptiert wird.

Bemerkenswerte Browser-Unterstützungsprobleme: Früher gab es große Unterschiede bei der On-Screen-Darstellung von pt-Größen. Hier ist ein Vergleich von IE 6 vs. Firefox (wahrscheinlich 3.6).

Pica

.wrap {
  width: 12pc; 
}

Die gleiche Geschichte wie bei Punkten, nur 1pc == 12pt.

ex

.wrap {
  width: 60ex;
}

Dies ist eine Messung, die auf der x-Höhe der aktuellen Schrift basiert. Manchmal stammen diese Informationen aus der Schriftart selbst, manchmal ermitteln Browser dies durch Messung eines Kleinbuchstabens, und im schlimmsten Fall wird sie auf 0,5em gesetzt. Sie ist nach der "x"-Höhe benannt, weil sie angeblich auf der Höhe des Buchstabens x basiert. Um die x-Höhe zu verstehen, denken Sie an einen Kleinbuchstaben, der einen Teil hat, der nach oben ragt (Oberlänge) wie ein Kleinbuchstabe "d". Die x-Höhe beinhaltet diese Oberlänge nicht, sondern ist die Höhe des unteren Schleifenteils dieses Buchstabens.

Im Gegensatz zu ems, die sich bei Änderung der Schriftfamilie nicht ändern, ändern sich ex-Einheiten, wenn Sie die Schriftfamilie ändern, da der Wert einer Einheit spezifisch an diese Schrift gebunden ist. (Beweis).

ch

.wrap {
  width: 60ch;
}

Dies ist ähnlich im Geist wie x-height, nur dass ch auf der Breite der Null (0) basiert und nicht auf der Höhe des x-Zeichens. Es ändert sich auch, wenn sich die Schriftfamilie ändert.

Viewport-Prozentuale Längen

vw

.wrap {
  width: 10vw;
}

Dies ist die Einheit „Viewport-Breite“. 1vw entspricht 1% der Breite des Viewports. Sie ähnelt dem Prozentwert, außer dass der Wert für alle Elemente konstant bleibt, unabhängig von ihren Elternelementen oder der Breite der Elternelemente. Ähnlich wie rem-Einheiten immer relativ zur Wurzel sind.

Die Größenbestimmung von Text ist hier der Hauptanwendungsfall. Siehe Viewport Sized Typography.

Bemerkenswerte Browser-Unterstützungsprobleme: Keine Unterstützung in mobilen Browsern außer dem allerneuesten iOS 6. Dies gilt für alle viewport-bezogenen Längeneinheiten.

vh

.wrap {
  width: 10vh;
}

Dies ist dasselbe wie die Einheit vw (Viewport-Breite), nur dass sie sich stattdessen auf die Viewport-Höhe bezieht.

vmin

.wrap {
  width: 20vmin;
}

Dieser Wert ist zu jedem Zeitpunkt der kleinere der beiden Werte, vw oder vh. Im Standardanwendungsfall der Textgrößenbestimmung kann dies eine nützlichere Metrik sein als vw oder vh allein, um die tatsächliche Bildschirmgröße zu bestimmen.

vmax

.wrap {
  width: 20vmax;
}

Dieser Wert ist zu jedem Zeitpunkt der größere der beiden Werte, vw oder vh.

Bemerkenswerte Browser-Unterstützungsprobleme: WebKit-basierte Browser unterstützen vmin, aber (noch) nicht vmax. Firefox unterstützt jedoch vmax.

Ausreißer

Prozent

.wrap {
  width: 50%; 
}

Eine in Prozent gesetzte Länge basiert auf der Länge der gleichen Eigenschaft des Elternelements. Wenn beispielsweise ein Element mit einer Breite von 450 Pixeln gerendert wird, wird ein Kindelement mit einer Breite von 50 % mit 225 Pixeln gerendert¹.

Trivia: Prozent ist technisch gesehen keine Längeneinheit, aber ich nehme sie hier auf, da sie so eng verwandt ist.

Weitere Informationen

• Das Standarddokument zu Längen

Was wird in Ihrem Browser unterstützt?

Siehe hier:

Check out this Pen!

---

¹ Unter der Annahme, dass das Kindelement kein Inline-Element oder eine Tabellenzelle mit seltsamen Tabellen-Eigenheiten ist, oder ein Flex-Kind-Element oder eine Grid-Zelle oder ähnlicher schräger Kram.