Zeilenabstand variieren

[Walter P,]

Hallo,

in dem Beispiel ist mir der Zeilenabstand ohne die CSS-Angabe zu groß.

Gibt es eine elegantere Methode den Zeilenabstand zu regeln als mit negativen margin-Werten?

[Ryuno-Ki]

Moin Walter,

in dem Beispiel ist mir der Zeilenabstand ohne die CSS-Angabe zu groß.

Gibt es eine elegantere Methode den Zeilenabstand zu regeln als mit negativen margin-Werten?

Da <p>-Elemente standardmäßig margin-block: 1rem; haben, könntest du das überschreiben:

p {
  margin-block-start: 0.2rem;
}

Weil 1 - 0.8 = 0.2.

Übersehe ich da was?

Gruß,

[Matthias Scharwies]

Servus!

Moin Walter,

in dem Beispiel ist mir der Zeilenabstand ohne die CSS-Angabe zu groß.

Gibt es eine elegantere Methode den Zeilenabstand zu regeln als mit negativen margin-Werten?

Übersehe ich da was?

Eventuell CSS/Eigenschaften/line-height

Herzliche Grüße
Matthias Scharwies

[Gunnar Bittersmann]

@@Matthias Scharwies

Eventuell CSS/Eigenschaften/line-height

Nein.

Walter hatte den Begriff falsch verwendet. Er meinte nicht Zeilenabstand, sondern Abstand zwischen Elementen.

🖖 Live long and prosper

PS: Der Zeilenabstand ist in seinem Beispiel zu klein (blöder Browserdefault), er müsste vergrößert werden. Das sieht man bei schmalem Viewport.

[Gunnar Bittersmann]

@@Ryuno-Ki

Da <p>-Elemente standardmäßig margin-block: 1rem; haben

Nein, haben sie nicht. Das wäre auch ein ziemlich unsinniger Browserdefault.

Der Abstand in Blockrichtung hängt von der Schriftgröße des Absatzes ab. (Beispiel) Und das sollte er auch.

p {
  margin-block-start: 0.2rem;
}

Also nicht in rem angegeben werden, sondern in em. Oder wegen vertikalem Rhythmus in lh.

🖖 Live long and prosper

[Ryuno-Ki]

Moin Gunnar,

Da <p>-Elemente standardmäßig margin-block: 1rem; haben

Nein, haben sie nicht.

Stimmt, es muss natürlich 1em sein:

Das wäre auch ein ziemlich unsinniger Browserdefault.

Eine ziemliche Wertung. Könnte jetzt pampig antworten, dass du ja einen PR mit besseren Werten einreichen kannst, aber das vergiftet die Stimmung.

Der Abstand in Blockrichtung hängt von der Schriftgröße des Absatzes ab. (Beispiel) Und das sollte er auch.

Schon wieder ein Codepen.

p {
  margin-block-start: 0.2rem;
}

Also nicht in rem angegeben werden, sondern in em.

Akzeptier ich.

Oder wegen vertikalem Rhythmus in lh.

Vertikaler Rhythmus mag vielleicht noch nicht allen bekannt sein.

Die Einheit ist mir neu. Wieder was dazu gelernt.

Gruß,

[Gunnar Bittersmann]

@@Ryuno-Ki

Das wäre auch ein ziemlich unsinniger Browserdefault.

Eine ziemliche Wertung.

Auf neudeutsch: the hard cold truth.

1rem wäre ein ziemlich unsinniger Browserdefault. Ist ja aber kein Browserdefault. Deshalb der Konjunktiv.

Könnte jetzt pampig antworten, dass du ja einen PR mit besseren Werten einreichen kannst, aber das vergiftet die Stimmung.

1em ist kein so unsinniger Browserdefault. Kein Grund, da einen PR einzureichen. Browserdefaults sollte man auch, da Myriaden von Webseiten darauf aufbauen, nur mit sehr viel Bedacht ändern. Also so gut wie nie.

(Einen Default, der in Chromium mal geändert werden könnte, hatte ich vor einiger Zeit mal aufgezeigt.)

Schon wieder ein Codepen.

Ja, sicher. Und?

Vertikaler Rhythmus

Was steht da? „Die line-height wird mit einem Wert von 1.4lh festgelegt“?

Jetzt nicht mehr. Berichtigt.

🖖 Live long and prosper

[Ryuno-Ki]

Moin Gunnar,

Das wäre auch ein ziemlich unsinniger Browserdefault.

Eine ziemliche Wertung.

Auf neudeutsch: the hard cold truth.

Eine Meinung ist kein Fakt.

1rem wäre ein ziemlich unsinniger Browserdefault. Ist ja aber kein Browserdefault. Deshalb der Konjunktiv.

👍

Schon wieder ein Codepen.

Ja, sicher. Und?

Jetzt kram ich einen alten Kommentar raus.

Vertikaler Rhythmus

Was steht da? „Die line-height wird mit einem Wert von 1.4lh festgelegt“?

Jetzt nicht mehr. Berichtigt.

Gute Tat des Tages ✅

Gruß,

[Rolf B]

Hallo André,

Eine Meinung ist kein Fakt.

Meine Meinung ist, dass wir sind uns alle einig sind, dass da kein rem hingehört.

Insofern meine ich, dass man nicht zu kritisieren braucht, wenn Gunnar diese Aussage als Fakt hinstellt. Fakten sind oft genug aus Meinungen entstanden, die (a) von genügend vielen Menschen geteilt wurden und die (b) keiner schlüssig widerlegt hat.

Teil (b) ist wichtig, um echte Fakten von „Alternativen Fakten“ zu unterscheiden 😉

Rolf

[Gunnar Bittersmann]

@@Ryuno-Ki

Schon wieder ein Codepen.

Ja, sicher. Und?

Jetzt kram ich einen alten Kommentar raus.

Wie du sagtest: Eine Meinung ist kein Fakt.

Außerdem war das Beispiel dazu bestimmt, dir deinen Fehler aufzuzeigen. Nichts, was in ein Wiki-Artikel müsste.

🖖 Live long and prosper

[Ryuno-Ki]

Moin Gunnar,

Wie du sagtest: Eine Meinung ist kein Fakt.

Außerdem war das Beispiel dazu bestimmt, dir deinen Fehler aufzuzeigen. Nichts, was in ein Wiki-Artikel müsste.

Dafür brauch ich kein CodePen. Tatsächlich habe ich den Link nicht einmal aufgerufen, weil ich die Korrektur auch so schon erkannt habe. Die Arbeit hättest dir also sparen können.

Mir geht es eher darum, ob wir nicht also auch Aufwand einsparen können, der dann eher in eine Diskussionskultur oder Wiki-Pflege fließt.

Gruß,

[Rolf B]

Hallo Gunnar Bittersmann,

Eine line-height von 1.4lh ist zulässig, hat aber eine andere Wirkung als eine line-height von 1.4.

body {
   font-size: 16px;
   line-height: 22px: /* um vom konkreten Font unabhängig zu sein */
}

body > p:nth-child(1) {
   line-height: 1.4;
}
body > p:nth-child(2) {
   font-size: 24px;
   line-height: 1.4;
}

body > p:nth-child(3) {
   line-height: 1.4lh;
}
body > p:nth-child(4) {
   font-size: 24px;
   line-height: 1.4lh;
}

<body>
<p>Absatz 1: font-size: 16px, line-height: 1.4 = 22.4px</p>
<p>Absatz 2: font-size: 24px, line-height: 1.4 = 33.6px</p>
<p>Absatz 3: font-size: 16px, line-height: 1.4lh = 30.8px</p>
<p>Absatz 4: font-size: 24px, line-height: 1.4lh = 30.8px </p>
</body>

Die beiden ersten Absätze verwenden die font-size des p-Elements, die Absätze 3 und 4 die line-height des Elternelements als Berechnungsgrundlage.

Jetzt nicht mehr. Berichtigt.

Ich habe nochmal drüberpoliert. Da war einiges unklar. Ich fand die Angabe von line-height:1.4 auch unpassend, es ist eine magic number, die je nach Font falsch sein kann. Ich habe es durch calc(1lh + 1px) ersetzt.

Dabei fällt mir auf: das Beispiel zieht den Parisienne-Font aus Google-Fonts. ARGH!

TODO für heute abend: Parisienne SELF-hosten!

Rolf

[Rolf B]

Hallo Walter,

diese Frage ist komplexer als man meinen könnte, denn dieser Brei hat einige Köche.

Man sieht im Browser die Zeilen, aber ihre Zugehörigkeit zu Elementen sieht man nicht so schnell. Dafür muss man die Entwicklerwerkzeuge bemühen.

Beim Abstand zwischen dem h3 und dem p Element sind zwei Margins beteiligt: margin-block-end (margin-bottom) des h3 und margin-block-start (margin-top). Ab Werk haben hier beide Elemente etwas, und damit es nicht zu einfach wird, lässt der Browser sie auch noch zusammenfallen.

Du musst also beide Margins ändern.

Außer den Margins kann es auch noch ein Padding geben. In deinem Fall nicht, aber man sollte das prüfen, bevor man die Negativkeule schwingt.

Aber beides ist nicht wirklich der Zeilenabstand. Den hat man, wenn der Browser Text innerhalb einer Box umbricht, und DAFÜR ist line-height relevant (wenn Mozilla mal aufwacht, auch noch text-box).

Rolf