Zeilenabstand variieren
Walter P,
- css
- html
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?
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ß,
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
@@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.
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