line-height

  • Revision slug: CSS/line-height
  • Revision title: line-height
  • Revision id: 25952
  • Created:
  • Creator: Jürgen Jeka
  • Is current revision? No
  • Comment no wording changes

Revision Content

{{ CSSRef() }}

Summary

On inline elements, the line-height CSS property specifies the height that is used in the calculation of the line box height.
On block level elements, line-height specifies the minimal height of line boxes within the element.

  • {{ Xref_cssinitial() }}: {{ Cssxref("normal") }}
  • Applies to: all elements
  • {{ Xref_cssinherited() }}: yes
  • Percentages: refer to the font size of the element itself
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: for <length> and <percentage> the absolute value; otherwise as specified

Syntax

line-height:  normal | {{ Xref_cssnumber() }}| {{ Xref_csslength() }}| {{ Xref_csspercentage() }}

Values

normal
Depends on the user agent. Desktop browsers (including Firefox) use a default value of roughly 1.2, depending on font-size and font-family of the element.
<number>
The used value is this unitless {{ Xref_cssnumber() }} multiplied by the element's font size. The computed value is the same as the specified <number>. In most cases this is is the preferred way to set line-height with no unexpected results in case of inheritance.
<length>
The specified {{ Xref_csslength() }} is used in the calculation of the line box height. See {{ Xref_csslength() }} values for possible units.
<percentage>
Relative to the font size of the element itself. The computed value is this percentage multiplied by the element's computed font size.

Examples

/* 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 { line-height: 12pt;  font-size: 10pt }   /* lenght */
div { font: 10pt/1.2  Georgia,"Bitstream Charter",serif }

Notes

Note:  It is often more convenient to set line-height by using the {{ cssxref("font") }} shortcut as stated in the "Examples" section above.

Avoid unexpected results by using unitless line-height

While line-height accepts values also as {{ Xref_csslength() }} and {{ Xref_csspercentage() }}, unitless {{ Xref_cssnumber() }}s are mostly the better choice for this property. Compare the following examples:

<style>
      .green { font-size: 15px; line-height: 1.1;   background: lightgreen; }
      .red   { font-size: 15px; line-height: 110%;  background: coral; }
      h1     { font-size: 30px; }
</style>

<div class=green>
 <h1>Firefox and other Gecko Browsers</h1>
 The Mozilla developers never seem ...
</div>

<div class=red>
<h1>Firefox and other Gecko Browsers</h1>
 The Mozilla developers never seem ...
</div>

Firefox and other Gecko Browsers

The Mozilla developers never seem to participate in the races to be the first and the fastest that periodically break out between the Safari and Opera teams.  Jan Wolter

Firefox and other Gecko Browsers

The Mozilla developers never seem to participate in the races to be the first and the fastest that periodically break out between the Safari and Opera teams.  Jan Wolter

Specifications

Browser compatibility

Browser Lowest Version
Internet Explorer 4.0
Firefox (Gecko) 1.0 (1.0)
Opera 3.5
Safari (WebKit) 1.0 (85)

See also

{{ Cssxref("font") }}, {{ Cssxref("font-size") }}

{{ languages( { "es": "es/CSS/line-height", "fr": "fr/CSS/line-height" } ) }}

Revision Source

<p>{{ CSSRef() }}</p>
<h3>Summary</h3>
<p>On inline elements, the<code> line-height </code>CSS property specifies the height that is used in the calculation of the line box height.<br>
On block level elements,<code> line-height </code>specifies the minimal height of line boxes within the element.</p>
<ul> <li>{{ Xref_cssinitial() }}: {{ Cssxref("normal") }}</li> <li>Applies to: all elements</li> <li>{{ Xref_cssinherited() }}: yes</li> <li>Percentages: refer to the font size of the element itself</li> <li>Media: {{ Xref_cssvisual() }}</li> <li>{{ Xref_csscomputed() }}: for <code>&lt;length&gt;</code> and <code>&lt;percentage&gt;</code> the absolute value; otherwise as specified</li>
</ul>
<h3>Syntax</h3>
<pre class="eval">line-height:  normal | {{ Xref_cssnumber() }}| {{ Xref_csslength() }}| {{ Xref_csspercentage() }}
</pre>
<h3>Values</h3>
<dl> <dt>normal</dt> <dd>Depends on the user agent. Desktop browsers (including Firefox) use a default value of roughly<strong><code> 1.2</code></strong>, depending on<code> font-size </code>and<code> font-family </code>of the element.</dd> <dt>&lt;number&gt;</dt> <dd> The used value is this unitless {{ Xref_cssnumber() }} multiplied by the element's font size. The computed value is the same as the specified<code> &lt;number&gt;</code>. In most cases <strong>this is is the preferred way</strong> to set<code> line-height </code>with no unexpected results in case of inheritance.<br> </dd> <dt>&lt;length&gt;</dt> <dd> The specified {{ Xref_csslength() }} is used in the calculation of the line box height. See {{ Xref_csslength() }} values for possible units.</dd> <dt>&lt;percentage&gt;</dt> <dd>Relative to the font size of the element itself. The computed value is this percentage multiplied by the element's computed font size. </dd>
</dl>
<h3>Examples</h3>
<pre>/* 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 { line-height: 12pt;  font-size: 10pt }   /* lenght */
div { font: 10pt/1.2  Georgia,"Bitstream Charter",serif }</pre>
<h3>Notes</h3>
<div class="note"><strong>Note: </strong> It is often more convenient to set<code> line-height </code>by using the {{ cssxref("font") }} shortcut as stated in the "Examples" section above.</div>
<h3 style="border:none; font-size:1.2em">Avoid unexpected results by using unitless<code> line-height</code></h3>
<p>While<code> line-height </code>accepts values also as {{ Xref_csslength() }} and {{ Xref_csspercentage() }}, unitless {{ Xref_cssnumber() }}s are mostly the better choice for this property. Compare the following examples:</p>
<pre>&lt;style&gt;
      .green { font-size: 15px; line-height: 1.1;   background: lightgreen; }
      .red   { font-size: 15px; line-height: 110%;  background: coral; }
      h1     { font-size: 30px; }
&lt;/style&gt;

&lt;div class=green&gt;
 &lt;h1&gt;Firefox and other Gecko Browsers&lt;/h1&gt;
 The Mozilla developers never seem ...
&lt;/div&gt;

&lt;div class=red&gt;
&lt;h1&gt;Firefox and other Gecko Browsers&lt;/h1&gt;
 The Mozilla developers never seem ...
&lt;/div&gt;
</pre>
<div style="display:inline-block;width:13.5em; font-size:15px;line-height:1.1; background:lightgreen;">
<h4 style="font-size:30px; margin-bottom:0.6em">Firefox and other Gecko Browsers</h4>
The Mozilla developers never seem to participate in the races to be the first and the fastest that periodically break out between the Safari and Opera teams.  <em>Jan Wolter</em></div>
<div style="display:inline-block;width:13.5em; font-size:15px;line-height:110%; background:coral">
<h4 style="font-size:30px; margin-bottom:0.6em">Firefox and other Gecko Browsers</h4>
The Mozilla developers never seem to participate in the races to be the first and the fastest that periodically break out between the Safari and Opera teams.  <em>Jan Wolter</em></div>
<h3 style="margin-top:14px">Specifications</h3>
<ul> <li><a class="external" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height">CSS 2.1 Visual formatting #line-height</a></li>
</ul>
<h3>Browser compatibility</h3>
<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>Lowest Version</th> </tr> <tr> <td>Internet Explorer</td> <td>4.0</td> </tr> <tr> <td>Firefox (Gecko)</td> <td>1.0 (1.0)</td> </tr> <tr> <td>Opera</td> <td>3.5</td> </tr> <tr> <td>Safari (WebKit)</td> <td>1.0 (85)</td> </tr> </tbody>
</table>
<h3>See also</h3>
<p>{{ Cssxref("font") }}, {{ Cssxref("font-size") }}</p>
<p>{{ languages( { "es": "es/CSS/line-height", "fr": "fr/CSS/line-height" } ) }}</p>
Revert to this revision