CSS/Eigenschaften/Schriftformatierung/line-height

Aus SELFHTML-Wiki
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.

[Bearbeiten] siehe auch

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML