visudet.html

CSS lets learn this step by step...

href="visuren.html#inline-formatting">inline formatting contexts</a>,
user agents flow inline boxes into a vertical stack of <a
href="visuren.html#line-box">line boxes</a>. The height of a line box
is determined as follows:</p>

<ol>
<li>The height of each inline box in the line box is calculated (see
<a href="#Computing_heights_and_margins">"Computing heights and
margins"</a> and the <a href="visudet.html#propdef-line-height" class="noxref"><span
class="propinst-line-height">'line-height'</span></a> property).

<li>The inline boxes are aligned vertically according
to their <a href="visudet.html#propdef-vertical-align" class="noxref"><span class="propinst-vertical-align">'vertical-align'</span></a>
property. 

<li>The line box height is the distance between the uppermost
box top and the lowermost box bottom.
</ol>

<p>Empty inline elements generate empty inline boxes, but these boxes
still have margins, padding, borders and a line height, and thus
influence these calculations just like elements with content.

<P>Note that if all the boxes in the line box are aligned along their
bottoms, the line box will be exactly the height of the tallest box.
If, however, the boxes are aligned along a common baseline, the line
box top and bottom may not touch the top and bottom of the tallest
box.

<H3><a name="q22">10.8.1 Leading and half-leading</a></h3>

<P>Since the height of an inline box may be different from the font size
of text in the box (e.g., <a href="visudet.html#propdef-line-height" class="noxref"><span
class="propinst-line-height">'line-height'</span></a> &gt; 1em), there may
be space above and below rendered glyphs.  The difference between the
font size and the computed value of <a href="visudet.html#propdef-line-height" class="noxref"><span
class="propinst-line-height">'line-height'</span></a> is called the <a name="x15"><span
class="index-def" title="leading"><EM>leading</EM></span></a>. Half the
leading is called the <a name="x16"><span class="index-def"
title="half-leading"><EM>half-leading</EM></span></a>.

<P>User agents center glyphs vertically in an inline box, adding
half-leading on the top and bottom.  For example, if a piece of text
is '12pt' high and the <a href="visudet.html#propdef-line-height" class="noxref"><span
class="propinst-line-height">'line-height'</span></a> value is '14pt',
2pts of extra space should be added: 1pt above and 1pt below the
letters. (This applies to empty boxes as well, as if the empty box
contained an infinitely narrow letter.)

<P>When the <a href="visudet.html#propdef-line-height" class="noxref"><span class="propinst-line-height">'line-height'</span></a>
value is less than the font size, the final inline box height will be
less than the font size and the rendered glyphs will "bleed" outside
the box. If such a box touches the edge of a line box, the rendered
glyphs will also "bleed" into the adjacent line box.

<P>Although margins, borders, and padding of non-replaced elements do
not enter into inline
box height calculation (and thus the line box calculation), they are
still rendered around inline boxes.  This means that if the height of a line box is shorter
than the <a href="box.html#outer-edge">outer edges</a> of the boxes it
contains, backgrounds and colors of padding and borders may "bleed"
into adjacent line boxes. However, in this case, some user agents may
use the line box to "clip" the border and padding areas (i.e., not
render them).

<div class="propdef">
<dl><dt>
<span class="index-def" title="'line-height'"><a name="propdef-line-height" class="propdef-title"><strong>'line-height'</strong></a></span>
<dd>
<table class="propinfo" cellspacing=0 cellpadding=0>
<tr valign=baseline><td><em>Value:</em>&nbsp;&nbsp;<td>normal | <a href="syndata.html#value-def-number" class="noxref"><span class="value-inst-number">&lt;number&gt;</span></a> | <a href="syndata.html#value-def-length" class="noxref"><span class="value-inst-length">&lt;length&gt;</span></a> | <a href="syndata.html#value-def-percentage" class="noxref"><span class="value-inst-percentage">&lt;percentage&gt;</span></a> | <a href="cascade.html#value-def-inherit" class="noxref"><span class="value-inst-inherit">inherit</span></a>
<tr valign=baseline><td><em>Initial:</em>&nbsp;&nbsp;<td>normal
<tr valign=baseline><td><em>Applies to:</em>&nbsp;&nbsp;<td>all elements
<tr valign=baseline><td><em>Inherited:</em>&nbsp;&nbsp;<td>yes
<tr valign=baseline><td><em>Percentages:</em>&nbsp;&nbsp;<td>refer to the font size of the element itself
<tr valign=baseline><td><em>Media:</em>&nbsp;&nbsp;<td><a href="media.html#visual-media-group" class="noxref">visual</a>
</table>
</dl>
</div>


<p>If the property is set on a <a
href="visuren.html#block-level">block-level</a> element whose content
is composed of <a href="visuren.html#inline-level">inline-level</a>
elements, it specifies the <em>minimal</em> height of each 
generated inline box.

<p>If the property is set on an <a
href="visuren.html#inline-level">inline-level</a> element, it
specifies the <em>exact</em> height of each box generated by the
element. (Except for inline <a
href="conform.html#replaced-element">replaced</a> elements, where the
height of the box is given by the <a href="visudet.html#propdef-height" class="noxref"><span
class="propinst-height">'height'</span></a> property.)

<P>Values for this property have the following meanings:</p>

<dl>
<dt><strong>normal</strong>
<dd>Tells user agents to set the <a
href="cascade.html#computed-value">
computed value</a> to a "reasonable"
value based on the font size of the element. The
value has the same meaning as <span class="index-inst" title="&lt;number&gt;"><a name="x18" href="syndata.html#value-def-number" class="noxref"><span class="value-inst-number">&lt;number&gt;</span></a></span>.
We recommend a computed value for 'normal' between 1.0 to 1.2. 

<dt><span class="index-inst" title="&lt;length&gt;"><a name="x19" href="syndata.html#value-def-length" class="noxref"><span
class="value-inst-length"><strong>&lt;length&gt;</strong></span></a></span>
<dd>The box height is set to this length. Negative values are illegal.

<dt><span class="index-inst" title="&lt;number&gt;"><a name="x20" href="syndata.html#value-def-number" class="noxref"><span
class="value-inst-number"><strong>&lt;number&gt;</strong></span></a></span>
<dd>The
<a href="cascade.html#computed-value">
computed value</a> of the property is this number multiplied by the
element's font size. Negative values are illegal.  However, the
number, not the <a href="cascade.html#computed-value">computed value</a>,
is inherited.

<dt><span class="index-inst" title="&lt;percentage&gt;"><a name="x21" href="syndata.html#value-def-percentage" class="noxref"><span
class="value-inst-percentage"><strong>&lt;percentage&gt;</strong></span></a></span>
<dd>The <a href="cascade.html#computed-value">computed value</a> of the
property is this percentage multiplied by the element's 
computed font size. Negative values are illegal.

</dl>

<div class="example"><P style="display:none">Example(s):</P><P>
The three rules in the example below have the same resultant line height:

<PRE>
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 */
</PRE>
</div>

<P>When an element contains text that is rendered in more than one
font, user agents should determine the <a href="visudet.html#propdef-line-height" class="noxref"><span
class="propinst-line-height">'line-height'</span></a> value according to
the largest font size. 

<P>Generally, when there is only one value of <a href="visudet.html#propdef-line-height" class="noxref"><span
class="propinst-line-height">'line-height'</span></a> for all inline
boxes in a paragraph (and no tall images), the above will ensure that
baselines of successive lines are exactly <a href="visudet.html#propdef-line-height" class="noxref"><span
class="propinst-line-height">'line-height'</span></a> apart. This is
important when columns of text in different fonts have to be aligned,
for example in a table.

<P>Note that replaced elements have a <a href="fonts.html#propdef-font-size" class="noxref"><span
class="propinst-font-size">'font-size'</span></a> and a <a href="visudet.html#propdef-line-height" class="noxref"><span
class="propinst-line-height">'line-height'</span></a> property, even if
they are not used directly to determine the height of the box. The
<a href="fonts.html#propdef-font-size" class="noxref"><span class="propinst-font-size">'font-size'</span></a> is, however, used
to define the 'em' and 'ex' units, and the 'line-height' has a role in
the <a href="visudet.html#propdef-vertical-align" class="noxref"><span class="propinst-vertical-align">'vertical-align'</span></a>
property.

<div class="propdef">
<dl><dt>
<span class="index-def" title="'vertical-align'"><a name="propdef-vertical-align" class="propdef-title"><strong>'vertical-align'</strong></a></span>
<dd>
<table class="propinfo" cellspacing=0 cellpadding=0>
<tr valign=baseline><td><em>Value:</em>&nbsp;&nbsp;<td>baseline | sub | super | top | text-top | middle | 
   bottom | text-bottom | <a href="syndata.html#value-def-percentage" class="noxref"><span class="value-inst-percentage">&lt;percentage&gt;</span></a> | <a href="syndata.html#value-def-length" class="noxref"><span class="value-inst-length">&lt;length&gt;</span></a> | <a href="cascade.html#value-def-inherit" class="noxref"><span class="value-inst-inherit">inherit</span></a>
<tr valign=baseline><td><em>Initial:</em>&nbsp;&nbsp;<td>baseline
<tr valign=baseline><td><em>Applies to:</em>&nbsp;&nbsp;<td>inline-level and 'table-cell' elements
<tr valign=baseline><td><em>Inherited:</em>&nbsp;&nbsp;<td>no
<tr valign=baseline><td><em>Percentages:</em>&nbsp;&nbsp;<td>refer to the 'line-height' of the element itself
<tr valign=baseline><td><em>Media:</em>&nbsp;&nbsp;<td><a href="media.html#visual-media-group" class="noxref">visual</a>
</table>
</dl>
</div>


<P>This property affects the vertical positioning inside a line box of
the boxes generated by an inline-level element. The following values
only have meaning with respect to a parent inline-level element, or to
a parent block-level element, if that element generates <a
href="visuren.html#anonymous">anonymous inline boxes</a>; they have no
effect if no such parent exists.</P>
 
<div class="note"><P>
<em><strong>Note.</strong> Values of this property have
slightly different meanings in the context of tables.
Please consult the section on <a href="tables.html#height-layout">
table height algorithms</a> for details.
</em>
</div>

<DL>
  <DT><strong>baseline</strong>
  <DD>Align the baseline of the box with the baseline of
      the parent box. If the box doesn't have a baseline,
      align the bottom of the box with the parent's baseline.
  <DT><strong>middle</strong>
  <DD>Align the vertical midpoint of the box with the baseline
      of the parent box plus half the x-height of the parent.
  <DT><strong>sub</strong>
  <DD>Lower the baseline of the box to the proper position for
      subscripts of the parent's box. (This value has no effect on the
      font size of the element's text.)
  <DT><strong>super</strong>
  <DD>Raise the baseline of the box to the proper position for
      superscripts of the parent's box. (This value has no effect on the
      font size of the element's text.)
  <DT><strong>text-top</strong>
  <DD>Align the top of the box with the top of the parent element's font.
  
  <DT><strong>text-bottom</strong>
  <DD>Align the bottom of the box with the bottom of the parent 
      element's font.
  <DT><span class="index-inst" title="&lt;percentage&gt;"><a name="x23" href="syndata.html#value-def-percentage" class="noxref"><span
  class="value-inst-percentage"><strong>&lt;percentage&gt;
  </strong></span></a></span>
  <DD>Raise (positive value) or lower (negative value) the box
      by this distance (a percentage of the <a href="visudet.html#propdef-line-height" class="noxref"><span
      class="propinst-line-height">'line-height'</span></a> value).
      The value '0%' means the same as 'baseline'.
  <DT><span class="index-inst" title="&lt;length&gt;"><a name="x24" href="syndata.html#value-def-length" class="noxref"><span
  class="value-inst-length"><strong>&