Unsere Freiwilligen haben diesen Artikel noch nicht in Deutsch übersetzt. Machen Sie mit und helfen Sie, das zu erledigen!
Sie können den Artikel auch auf English (US) lesen.

The line-height CSS property sets the amount of space used for lines, such as in text. On block-level elements, it specifies the minimum height of line boxes within the element. On non-replaced inline elements, it specifies the height that is used to calculate line box height.

/* Keyword values */
line-height: normal;

/* Unitless values: use this number multiplied
by the element's font size */
line-height: 3.5;

/* <length> values */
line-height: 3em;

/* <percentage> values */
line-height: 34%;

/* Global values */
line-height: inherit;
line-height: initial;
line-height: unset;

Initial valuenormal
Applies toall elements. It also applies to ::first-letter and ::first-line.
Inheritedyes
Percentagesrefer to the font size of the element itself
Mediavisual
Computed valuefor percentage and length values, the absolute length, otherwise as specified
Animation typeeither number or length
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Syntax

The line-height property is specified as any one of the following:

Values

normal
Depends on the user agent. Desktop browsers (including Firefox) use a default value of roughly 1.2, depending on the element's font-family.
<number>
The used value is this unitless <number> multiplied by the element's own font size. The computed value is the same as the specified <number>. In most cases, this is the preferred way to set line-height and avoid unexpected results due to inheritance.
<length>
The specified <length> is used in the calculation of the line box height.
<percentage>
Relative to the font size of the element itself. The computed value is this <percentage> multiplied by the element's computed font size. Percentage and em values may have unexpected results (see the second example below).

Formal syntax

normal | <number> | <length> | <percentage>

Examples

Basic example

/* All rules below have the same resultant line height */

div { line-height: 1.2;   font-size: 10pt }   /* number */ 
div { line-height: 1.2em; font-size: 10pt }   /* length */ 
div { line-height: 120%;  font-size: 10pt }   /* percentage */
div { font: 10pt/1.2  Georgia,"Bitstream Charter",serif } /* font shorthand */

It is often more convenient to set line-height by using the font shorthand as shown above, but this requires the font-family property to be specified as well.

Prefer unitless numbers for line-height values

This example shows why it is better to use <number> values instead of <length> values. We will use two <div> elements. The first, with the green border, uses a unitless line-height value. The second, with the red border, uses a line-height value defined in ems.

.green {
  line-height: 1.1;
  border: solid limegreen;
}
.red {
  line-height: 1.1em;
  border: solid red;
}
h1 {
  font-size: 30px;
}
.box {
  width: 18em;
  display: inline-block;
  vertical-align: top;
  font-size: 15px;
}
<div class="box green">
 <h1>Avoid unexpected results by using unitless line-height.</h1>
  length and percentage line-heights have poor inheritance behavior ...
</div>

<div class="box red">
 <h1>Avoid unexpected results by using unitless line-height.</h1>
  length and percentage line-heights have poor inheritance behavior ...
</div>

<!-- The first <h1> line-height is calculated from its own font-size   (30px × 1.1) = 33px  --> 
<!-- The second <h1> line-height results from the red div's font-size  (15px × 1.1) = 16.5px,  probably not what you want -->

Specifications

Specification Status Comment
CSS Transitions
The definition of 'line-height' in that specification.
Working Draft Defines line-height as animatable.
CSS Level 2 (Revision 1)
The definition of 'line-height' in that specification.
Recommendation No change.
CSS Level 1
The definition of 'line-height' in that specification.
Recommendation Initial definition.

Browser compatibility

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0[1] (Yes) 1.0 (1.7 or earlier) 4.0[1] 7.0 1.0[1]
Feature Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 1.0[1] (Yes) 1.0 (1) 6.0[1] 6.0 1.0[1]

 

See also

Schlagwörter des Dokuments und Mitwirkende

Schlagwörter: 
 Zuletzt aktualisiert von: Jeremie,