line-height

  • Revision slug: CSS/line-height
  • Revision title: line-height
  • Revision id: 386015
  • Created:
  • Creator: ethertank
  • Is current revision? No
  • Comment TOCLimit(3+)

Revision Content

{{CSSRef}}

Summary

On block level elements, the line-height CSS property specifies the minimal height of line boxes within the element.

On non-replaced inline elements, line-height specifies the height that is used in the calculation of the line box height.

On replaced inline elements, like buttons or other input element, line-height has no effect. [1]

{{cssbox("line-height")}}

Syntax

Formal syntax: {{csssyntax("line-height")}}
line-height: normal 
line-height: 3.5    /* <number> values */
line-height: 3em    /* <length> values */
line-height: 34%    /* <percentage values */

line-height: inherit

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 {{Xref_cssnumber}} multiplied by the element's font size. The computed value is the same as the specified <number>. In most cases this 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.
Percentage and em values may have unexpected results, see "Notes" section.

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 }   /* length */
div { font: 10pt/1.2  Georgia,"Bitstream Charter",serif }

Notes

  • It is often more convenient to set line-height by using the {{cssxref("font")}} shortcut as stated in the "Examples" section above.
  • Prefer a unitless number:
    <style>
          .green { font-size: 15px;  line-height: 1.1;  border: solid limegreen; }
          .red   { font-size: 15px;  line-height: 1.1em;  border: solid red; }
          h1     { font-size: 30px; }
          div    { width: 19em;  display: inline-block; }
    </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>
    
    <!-- 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 -->
    

    Avoid unexpected results, use unitless line-height!

    em values and <percentage> line-heights have poor inheritance behavior, and should almost never be used in practice. Stick to unitless line-heights (such as "1.1").

    Avoid unexpected results, use unitless line-height!

    em values and <percentage> line-heights have poor inheritance behavior, and should almost never be used in practice. Stick to unitless line-heights (such as "1.1").

Specifications

Specification Status Comment
{{SpecName('CSS3 Transitions', '#animatable-css', 'line-height')}} {{Spec2('CSS3 Transitions')}} Defines line-height as animatable.
{{SpecName('CSS2.1', 'visudet.html#propdef-line-height', 'line-height')}} {{Spec2('CSS2.1')}} No change.
{{SpecName('CSS1', '#line-height', 'line-height')}} {{Spec2('CSS1')}} Initial definition.

Browser compatibility

{{CompatibilityTable}}
Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 [1] {{CompatGeckoDesktop("1")}} 4.0 [1] 7.0 1.0 [1]
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 1.0 [1] {{CompatGeckoMobile("1")}} 6.0 [1] 6.0 1.0 [1]

Webkit & Trident (IE)

[1] Both engines doesn't implement the correct behavior w/ replaced inline elements like buttons. They allow, in some cases, line-height, to have effect on them. This is incorrect per spec.

See also

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

Revision Source

<div>
  {{CSSRef}}</div>
<h2 id="Summary">Summary</h2>
<p>On block level elements, the <code>line-height</code> CSS property specifies the minimal height of line boxes within the element.</p>
<p>On non-replaced inline elements, <code>line-height</code> specifies the height that is used in the calculation of the line box height.</p>
<p>On replaced inline elements, like buttons or other input element, <code>line-height</code> has no effect. [1]</p>
<p>{{cssbox("line-height")}}</p>
<h2 id="Syntax">Syntax</h2>
<pre class="twopartsyntaxbox">
<a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("line-height")}}
</pre>
<pre>
line-height: normal 
line-height: 3.5    /* &lt;number&gt; values */
line-height: 3em    /* &lt;length&gt; values */
line-height: 34%    /* &lt;percentage values */

line-height: inherit
</pre>
<h3 id="Values">Values</h3>
<dl>
  <dt>
    <code>normal</code></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 the element's<code> font-family</code>.</dd>
  <dt>
    <code>&lt;number&gt;</code></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 the preferred way</strong> to set <code>line-height</code> with no unexpected results in case of inheritance.</dd>
  <dt>
    <code>&lt;length&gt;</code></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>
    <code>&lt;percentage&gt;</code></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.<br />
    <strong>Percentage</strong> and <strong>em</strong> values may have unexpected results, see "Notes" section.</dd>
</dl>
<h2 id="Examples">Examples</h2>
<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 }   /* length */
div { font: 10pt/1.2  Georgia,"Bitstream Charter",serif }</pre>
<h3 id="Notes">Notes</h3>
<ul>
  <li>It is often more convenient to set<code> line-height </code>by using the {{cssxref("font")}} shortcut as stated in the "Examples" section above.</li>
  <li>Prefer a unitless number:
    <pre>
&lt;style&gt;
      .green { font-size: 15px;  line-height: 1.1;  border: solid limegreen; }
      .red   { font-size: 15px;  line-height: 1.1em;  border: solid red; }
      h1     { font-size: 30px; }
      div    { width: 19em;  display: inline-block; }
&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;

&lt;!-- The first &lt;h1&gt; line-height is calculated from its own font-size   (30px × 1.1) = <strong>33px</strong>  --&gt; 
&lt;!-- The second &lt;h1&gt; line-height results from the red div's font-size  (15px × 1.1) = <strong>16.5px</strong>,  probably not what you want --&gt;
</pre>
    <div style="display:inline-block; width:19em; font-size:15px; line-height:1.1; padding:0.2em; border:solid limegreen;">
      <h4 id="Avoid_unexpected_results.2C_use_unitless_line-height!" style="font-size:30px; border:none; margin:0.6em 0">Avoid unexpected results, use unitless <strong>line-height</strong>!</h4>
      <code>em</code> values and <code>&lt;percentage&gt;</code> line-heights have poor inheritance behavior, and should almost never be used in practice. Stick to unitless line-heights (such as "<code>1.1</code>").</div>
    <div style="display:inline-block; width:19em; font-size:15px; line-height:110%; padding:0.2em; border:solid red">
      <h4 id="Avoid_unexpected_results.2C_use_unitless_line-height!" style="font-size:30px; border:none; margin:0.6em 0">Avoid unexpected results, use unitless <strong>line-height</strong>!</h4>
      <code>em</code> values and <code>&lt;percentage&gt;</code> line-heights have poor inheritance behavior, and should almost never be used in practice. Stick to unitless line-heights (such as "<code>1.1</code>").</div>
  </li>
</ul>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'line-height')}}</td>
      <td>{{Spec2('CSS3 Transitions')}}</td>
      <td>Defines <code>line-height</code> as animatable.</td>
    </tr>
    <tr>
      <td>{{SpecName('CSS2.1', 'visudet.html#propdef-line-height', 'line-height')}}</td>
      <td>{{Spec2('CSS2.1')}}</td>
      <td>No change.</td>
    </tr>
    <tr>
      <td>{{SpecName('CSS1', '#line-height', 'line-height')}}</td>
      <td>{{Spec2('CSS1')}}</td>
      <td>Initial definition.</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<div>
  {{CompatibilityTable}}</div>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>1.0 [1]</td>
        <td>{{CompatGeckoDesktop("1")}}</td>
        <td>4.0 [1]</td>
        <td>7.0</td>
        <td>1.0 [1]</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Phone</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>1.0 [1]</td>
        <td>{{CompatGeckoMobile("1")}}</td>
        <td>6.0 [1]</td>
        <td>6.0</td>
        <td>1.0 [1]</td>
      </tr>
    </tbody>
  </table>
</div>
<h3 id="Webkit_.26_Trident_(IE)">Webkit &amp; Trident (IE)</h3>
<p>[1] Both engines doesn't implement the correct behavior w/ replaced inline elements like buttons. They allow, in some cases, <code>line-height</code>, to have effect on them. This is incorrect per spec.</p>
<h2 id="See_also">See also</h2>
<ul>
  <li>{{Cssxref("font")}}, {{Cssxref("font-size")}}</li>
</ul>
Revert to this revision