Walter P,: Zeilenabstand variieren

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?

  1. 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ß,

    --
    a.k.a. André
    1. 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

      1. @@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.

        --
        “In my home, the America I love, the America I've written about, that has been a beacon of hope and liberty for 250 years, is currently in the hands of a corrupt, incompetent and treasonous administration. Tonight, we ask all who believe in democracy and the best of our American spirit, to rise with us, raise your voices against authoritarianism, and let freedom reign.”
        — Bruce Springsteen, Manchester 2025-05-14
  2. 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

    --
    sumpsi - posui - obstruxi