Warum gibt es keine Einheit für (EM * line-height) oder (REM * root line-height)?

Dieses Thema beschäftigt mich schon seit einiger Zeit sehr.

Im gesamten Web (und in CSS-Frameworks wie Bootstrap) REMwird es häufig für alles verwendet, von Padding (Beispiel: padding: 2rem;) bis Border-Radius (Beispiel: border-radius: 1rem;).

Ok, gut, das ist vernünftig. Aber warum gibt es nicht auch eine globale Einheit, die einen line-heightModifikator enthält? Angenommen, Sie verwenden ein typisches Raster, das auf Typografie basiert, Ihre Schriftskalierung PLUS Ihr Schriftabstand ist Ihre wahre Grundlinie, und daher scheint es eine weitaus wichtigere Einheit zu sein als nur einfach REM.

Angenommen, Ihr REMist auf 16 Pixel eingestellt und Ihr Textkörper line-heightist 1.6.:

body {
  font-size: 16px;
  line-height: 1.6;
}

Dies ist eine relativ häufige Konfiguration. Warum wird also REM(was 16pxin diesem Beispiel normalerweise so interpretiert wird) fast überall verwendet und nicht eine Einheit, die Ihre tatsächliche Rastergrundlinie darstellt (die normalerweise 25.6pxoder 16px * 1,6 ist)?

Mit anderen Worten, warum ist dies Standardpraxis?

my-padding: {
   padding: 2rem; // typically will be 32px;
}

aber nicht dies

my-padding: {
   padding: 2rlh; // typically will be 51.2px;
}

(Mir ist klar, dass rlh, oder root line height, in CSS nicht existiert. Meine Frage ist, warum existiert es nicht?).

Ich bin ein bisschen verwirrt von Ihrer Frage ... Sie können auch rems oder eine gültige CSS-Einheit für die Zeilenhöhe verwenden, löst das nicht Ihr Problem?
@Cai Ich bin mir nicht sicher, was du meinst. Das Problem besteht nicht darin, eine Zeilenhöhe festzulegen. Das Problem ist, dass es kein Äquivalent zu REMZeilenhöhe gibt.
Ich weiß nicht, was du meinst, was ist ein Äquivalent zu rem für Zeilenhöhe? Wenn Sie rem verwenden, um Ihre Zeilenhöhe festzulegen, ist Ihr hypothetisches rlh das gleiche wie bei der Verwendung von rem. Zum Beispiel Sie setzen line-height: 2rem;dann padding: 4rem;ist das gleiche wie tunpadding: 2rlh;
Das sollte doch sicher in Webmasters oder dem Main Stack sein?
@DigitalLightcraft Nein, hier ist es in Ordnung. Es gibt 236 Fragen, die mit markiert sind CSS.
@Cai Ich glaube , ich verstehe, was du meinst. Natürlich können Sie alles manuell einstellen. Aber das bricht, wenn sich Ihre Zeilenhöhe ändert. Das ist der Grund, warum REM überhaupt existiert. EMEigentlich denke ich, dass ich Verwirrung stifte, weil meine Frage sowohl auf als auch zutreffen könnte REM. Wenn ich die Auffüllung relativ zu einem übergeordneten Element festlegen möchte font-size * line height, gibt es dafür keine Einheit außer der harten Codierung der Werte.
@yourfriendzak Nichts würde kaputt gehen, wenn Sie REM verwenden. Das Problem ist die Verwendung einer einheitenlosen Zeilenhöhe, die empfohlen wird, es sei denn, Sie möchten ein konsistentes Grundlinienraster , wovon Sie sprechen, oder? In diesem Fall stellen Sie Ihre Linienhöhe mit REM ein, und Ihre REMs werden auch relativ zu Ihrer Grundlinie sein.
Das Problem mit der einheitenlosen Zeilenhöhe besteht darin, dass sie relativ zur Schriftgröße ist. Sie schlagen also eine relative Einheit einer relativen Einheit vor
@Cai Hmm, das ist interessant. Das hatte ich nicht bedacht. Ich muss meine Prämisse überdenken. Danke für die durchdachten Antworten.
Die Angabe von line-height ohne Einheit bedeutet "ems". Also 1,2 Zeilenhöhe = 1,2em
Die Standardantwort auf "Warum fehlt CSS diese Einstellung, die für Grafikdesigner und Schriftsatz üblich ist" lautet, weil "der CSS-Standardgruppe Grafikdesigner und Schriftsetzer fehlen".
Das heißt ... das ist eine etwas verwirrende Frage. Was ist Ihr ultimatives Ziel? Ich glaube, REM ist bereits genau das, was Sie wollen. "Zeilenhöhe" + "Leading" = was auch immer Sie wollen.

Antworten (1)

Der Grund dafür ist, dass es zu spezifisch ist, um die Kosten zu rechtfertigen.

In Ihrem speziellen Fall, in dem Sie root verwenden möchten line-height, lautet die Antwort auch, dass die meistens line-heightauf der basiert font-size(standardmäßig), so dass es nutzlos wäre, da wir bereits rem.

Allgemeiner können wir uns fragen: „Was ist, wenn ich die Wurzel als Abstand für den Rest meiner Ränder und Polsterung verwenden möchte margin-top? Warum gibt es rmtdafür keine Einheit?“ und tun dies für jede Eigenschaft. Wir sehen schnell, dass es dumm ist, Einheiten für jede Immobilie zu haben. emund remwurden basierend auf ausgewählt, font-sizeweil es eine gute Basis für andere Eigenschaften bietet, von denen aus gestylt werden kann.

Wenn Sie die Zeilenhöhe (oder einen anderen Wert) in den Werten anderer Eigenschaften verwenden möchten, können Sie entweder die benutzerdefinierten Eigenschaften von CSS (im Wesentlichen Variablen) oder einen CSS-Präprozessor wie SASS oder LESS verwenden.

Warum gibt es keine Einheit für (EM * line-height) oder (REM * root line-height)?
AntwortenHierDatenschutz-Bestimmungen1y, 0v