CSS/Eigenschaften/Schriftformatierung/line-height

Aus SELFHTML-Wiki
< CSS‎ | Eigenschaften‎ | Schriftformatierung(Weitergeleitet von Line-height)
Wechseln zu: Navigation, Suche
Mit der Eigenschaft line-height können Sie die Höhe der Textzeile entweder relativ zur geltenden font-size-Angabe oder als absolute Angabe definieren.
  • CSS 1.0
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
Beispiel ansehen …
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>line-height</title>
    <style>
      b             { background: #fca; }
      .for-comments { line-height: 2.5em; background: #cfe; }
      .for-comments p,
      .for-comments li { background: #efe; }
      .percent      { line-height: 120%; background: #aff; }
      .small        { font-size: .75em; background: #ccf; }
    </style>
  </head>
  <body>
    <h1>Zeilenhöhe</h1>
    <p>Dies ist in <b>normaler</b> Zeilenhöhe</p>
    <div class="for-comments">
      <p>Inhalt mit besonderer Zeilenhöhe</p>
      <ul>
        <li>Listenpunkt</li>
        <li>Listenpunkt</li>
      </ul>
    </div>
    <p class="percent">
      Relative Zeilenhöhe 
      <small>kleine Schrift</small>
    </p>
  </body>
</html>
Zur Veranschaulichung der Zeilenhöhe sind einige Elemente farblich hervorgehoben.
  1. In einem Bereich, der für Kommentare vorgesehen ist, gilt eine Zeilenhöhe von 2.5em.
  2. Im Bereich percent berechnet sich die Zeilenhöhe aus dem geerbten Wert font-size: 1em; (120% * 1em = 1.2em).
  3. Das Element small erbt line-height: 120%; des percent-Bereiches (120% * 0.75em = 0.9em).


Mit line-height können Sie die Zeilenhöhe bestimmen. Erlaubt sind folgende Werte:

  • eine Fließkommazahl oder Prozentangabe, bestimmt die Zeilenhöhe als Vielfaches der Schriftgröße, das heißt Angaben wie „line-height: 1.2“ und „line-height: 120%“ sind dabei identisch
  • eine Längenangabe
  • inherit, Zeilenhöhe des Elternelements
  • normal, Voreinstellung, weist den Browser an, eine vernünftige relative Zeilenhöhe selbst zu wählen
Beachten Sie: Eine für ein Element festgelegte Zeilenhöhe wird ohne Ihr Zutun an die Kindelemente vererbt.

Für normalen westlichen Text schwanken übliche line-height-Werte für normalen Text zwischen 1.25 und 1.4 wobei die Faustregel gilt: Je länger eine Zeile ist, um so größer sollte auch die Zeilenhöhe sein.

siehe auch[Bearbeiten]