Compare Revisions

line-height

Change Revisions

Revision 25948:

Revision 25948 by Jürgen Jeka on

Revision 25949:

Revision 25949 by Jürgen Jeka on

Title:
line-height
line-height
Slug:
CSS/line-height
CSS/line-height
Tags:
css, "CSS Reference"
css, "CSS Reference"
Content:

Revision 25948
Revision 25949
n10    <h3 name="Summary">n10    <h3>
n14      On inline elements, <code>line-height</code> specifies the n14      On inline elements, the <code>line-height</code> CSS proper
>height that is used in the calculation of the line box height.<br>ty specifies the height that is used in the calculation of the li
>>>ne box height.<br>
n28      <li>{{ Xref_csscomputed() }}: for &lt;length&gt; and &lt;pen28      <li>{{ Xref_csscomputed() }}: for <code>&lt;length&gt;</cod
>rcentage&gt; the absolute value; otherwise as specified>e> and <code>&lt;percentage&gt;</code> the absolute value; otherw
 >ise as specified
n31    <h3 name="Syntax">n31    <h3>
n34    <pre class="eval" style="white-space: nowrap;">n34    <pre class="eval">
35property: normal | {{ Xref_cssnumber() }} | {{ Xref_csslength() }35line-height:  normal | {{ Xref_cssnumber() }}| {{ Xref_csslength(
>} | {{ Xref_csspercentage() }}>) }}| {{ Xref_csspercentage() }}
n37    <h3 name="Values">n37    <h3>
n45        Depends on the user agent. Desktop browsers (including Fin45        Depends on the user agent. Desktop browsers (including Fi
>refox) use a default value of roughly <strong>1.2</strong>, depen>refox) use a default value of roughly <strong><code>1.2</code></s
>ding on <code>font-size</code> and <code>font-family</code> of th>trong>, depending on <code>font-size</code> and <code>font-family
>e element.></code> of the element.
n51        The used value is this {{ Xref_cssnumber() }} multiplied n51        The used value is this unitless {{ Xref_cssnumber() }} mu
>by the element's font size. The computed value is thee as the spe>ltiplied by the element's font size. The computed value is the sa
>cified <code>&lt;number&gt;</code>.>me as the specified <code>&lt;number&gt;</code>. In most cases <s
 >trong>this is is the preferred way</strong> to set <code>line-hei
 >ght</code> with no unexpected results in case of inheritance.<br>
n66    <h3 name="Examples">n66    <h3>
n76div { font: 10pt/1.2em Georgia,"Bitstream Charter",serif }n76div { font: 10pt/1.2  Georgia,"Bitstream Charter",serif }
n78    <h3 name="Notes">n78    <h3>
79      Notes79      Notes<small><br>
80      How to avoid unexpected results by using unitless <code>lin
 >e-height</code></small>
n82      [<em>fixme: add something about the difference of unitless n83      While <code>line-height</code> accepts values also as {{ Xr
>values</em>]>ef_csslength() }} and&nbsp;{{ Xref_csspercentage() }}, unitless {
 >{ Xref_cssnumber() }}s are mostly the better choice for this prop
 >erty. Compare the following examples:
n84    <h3 name="Specifications">n85    <pre>
86&lt;style&gt;
87      div    { display: inline-block;  width: 14em; }
88      .green { font-size: 15px; line-height: 1.1;   background: l
 >ightgreen; }
89      .red   { font-size: 15px; line-height: 110%;  background: c
 >oral; }
90      h1     { font-size: 30px; }
91&lt;/style&gt;
92 
93&lt;div class=green&gt;
94 &lt;h1&gt;Firefox and other Gecko Browsers&lt;/h1&gt;
95 The Mozilla developers never seem ...
96&lt;/div&gt;
97 
98&lt;div class=red&gt;
99&lt;h1&gt;Firefox and other Gecko Browsers&lt;/h1&gt;
100 The Mozilla developers never seem ...
101&lt;/div&gt;
102</pre>
103    <div style="display:inline-block;width:14em; font-size:15px;l
 >ine-height:1.1; background:lightgreen;">
104      <h1 class="plain">
105        Firefox and other Gecko Browsers
106      </h1>The Mozilla developers never seem to participate in th
 >e races to be the first and the fastest that periodically break o
 >ut between the Safari and Opera teams.&nbsp; <em>Jan Wolters</em>
107    </div>
108    <div style="display:inline-block;width:14em; font-size:15px;l
 >ine-height:110%; background:coral">
109      <h1 class="plain">
110        Firefox and other Gecko Browsers
111      </h1>The Mozilla developers never seem to participate in th
 >e races to be the first and the fastest that periodically break o
 >ut between the Safari and Opera teams.&nbsp; <em>Jan Wolters</em>
112    </div>
113    <div class="note">
114      <strong>Note:&nbsp;</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.
115    </div>
116    <h3>
n92    <h3 name="Browser_compatibility">n124    <h3>
n115            Firefoxn147            Firefox (Gecko)
n118            1.0n150            1.0 (1.0)
n131            Safarin163            Safari (WebKit)
n134            1.0n166            1.0 (85)
n139    <h3 name="See_also">n171    <h3>
t143      {{ Cssxref("font-size") }}t175      {{ Cssxref("font") }}, {{ Cssxref("font-size") }}
144    </p>
145    <p>
146      &nbsp;

Back to History