Revision 25958 of line-height

  • Revision slug: CSS/line-height
  • Revision title: line-height
  • Revision id: 25958
  • Created:
  • Creator: Jürgen Jeka
  • Is current revision? No
  • Comment 38 words added, 20 words removed

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.

<style>
      .green { font-size: 15px; line-height: 1.1;   border: solid limegreen; }
      .red   { font-size: 15px; line-height: 110%;  border: solid red;; }
      h1     { font-size: 30px; }
</style>

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

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

Avoid unexpected results by using unitless line-height

{{ Xref_csslength() }} and {{ Xref_csspercentage() }} line-heights have poor inheritance behavior, and should almost never be used in practice. Stick to unitless line-heights (such as 1.1). Compare this two examples.

Avoid unexpected results by using unitless line-height

{{ Xref_csslength() }} and {{ Xref_csspercentage() }} line-heights have poor inheritance behavior, and should almost never be used in practice. Stick to unitless line-heights (such as 1.1). Compare this two examples.

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>
<hr>
<pre>&lt;style&gt;
      .green { font-size: 15px; line-height: 1.1;   border: solid limegreen; }
      .red   { font-size: 15px; line-height: 110%;  border: solid red;; }
      h1     { font-size: 30px; }
&lt;/style&gt;

&lt;div class=green&gt;
 &lt;h1&gt;Avoid unexpected results by using unitless line-height&lt;/h1&gt;
  length and percentage line-heights have poor inheritance behavior ...
&lt;/div&gt;

&lt;div class=red&gt;
 &lt;h1&gt;Avoid unexpected results by using unitless line-height&lt;/h1&gt;
  length and percentage line-heights have poor inheritance behavior ...
&lt;/div&gt;
</pre>
<div style="display:inline-block;width:20em; font-size:15px;line-height:1.1; border:solid limegreen;">
<h3 style="font-size:30px; border:none; margin:0.6em 0">Avoid unexpected results by using unitless <strong>line-height</strong></h3>
{{ Xref_csslength() }} and {{ Xref_csspercentage() }} <code>line-height</code>s have poor inheritance behavior, and should almost never be used in practice. Stick to unitless <code>line-height</code>s (such as<code> 1.1</code>). Compare this two examples.</div>
<div style="display:inline-block;width:20em; font-size:15px;line-height:110%; border:solid red">
<h3 style="font-size:30px; border:none; margin:0.6em 0">Avoid unexpected results by using unitless <strong>line-height</strong></h3>
{{ Xref_csslength() }} and {{ Xref_csspercentage() }} <code>line-height</code>s have poor inheritance behavior, and should almost never be used in practice. Stick to unitless <code>line-height</code>s (such as<code> 1.1</code>). Compare this two examples.</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