css2/visudet.src

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<!-- $Id: visudet.src,v 2.173 2012-08-21 13:58:40 bbos Exp $ -->
<head>
<title>Visual formatting model details</title>
<!--script src="http://www.w3c-test.org/css/harness/annotate.js#CSS21_DEV" type="text/javascript" defer></script-->
<style type="text/css">
.current,.proposed,span.delcurrent,div.delcurrent { background:#feb }
ins.proposed,span.insproposed,li.insproposed,div.insproposed { background:#bfb }
del.proposed,span.delproposed { background:#fbb }
span.insproposed,li.insproposed,div.insproposed { text-decoration:underline }
span.delproposed,span.delcurrent,div.delcurrent { text-decoration:line-through }
body>del,body>ins {display:block}
</style>
</head>
<body>
<h1>Visual formatting model details</h1>

<h2><a name="containing-block-details">Definition of "containing
block"</a></h2>

<p>The position and size of an element's box(es) are sometimes
calculated relative to a certain rectangle, called the <dfn><span
class="index-def" title="containing block">containing
block</span></dfn> of the element. The containing block of an element
is defined as follows:</p>

<ol>
<li>The containing block in which the <a href="conform.html#root">root
element</a> lives is a rectangle called the <dfn><span
class="index-def" title="initial containing block|containing
block::initial">initial containing block</span></dfn>. For continuous
media, it has the dimensions of the <a
href="visuren.html#viewport">viewport</a> and is anchored at the
canvas origin; it is the <a href="page.html#page-area">page area</a>
for paged media. The 'direction' property of the initial
containing block is the same as for the root element.
</li>
<li>For other elements, if the element's position is 'relative' or 'static',
the containing block is formed by the content edge of the nearest
ancestor box that is a <a href="visuren.html#block-boxes">block
container</a> or which establishes a formatting context.
</li>
<li>If the element has 'position: fixed', the containing block is
established by the <a href="visuren.html#viewport">viewport</a>
in the case of continuous media or the page area in the case of paged media.
</li>
<li>If the element has 'position: absolute', the containing block is
established by the nearest ancestor with a <span
class="propinst-position">'position'</span> of 'absolute', 'relative'
or 'fixed', in the following way:
<ol>
<li>In the case that the ancestor is an inline element, the containing
block is the bounding box around the padding boxes of the first and
the last inline boxes
generated for that element. In CSS&nbsp;2.2, if the inline
element is split
across multiple lines, the containing block is undefined.
</li>
<li>Otherwise, the containing block
is formed by the <a href="box.html#padding-edge">padding edge</a> of
<!-- we probably mean: the principal box of -->
the ancestor.
</li>
</ol>

<p>If there is no such ancestor, the containing block is the initial
containing block.
</p>
</li>
</ol>

<p>In paged media, an absolutely positioned element is positioned
relative to its containing block ignoring any page breaks (as if the
document were continuous). The element may subsequently be broken over
several pages.
</p>

<p>For absolutely positioned content that resolves to a position on a
page other than the page being laid out (the current page), or
resolves to a position on the current page which has already been
rendered for printing, printers may place the content
<ul>
<li>on another location on the current page,
<li>on a subsequent page, or
<li>may omit it.
</ul>

<p class="note">Note that a
block-level element that is split over several pages may have a different
width on each page and that there may be device-specific limits.
</p>

<div class="example">
<p>With no positioning, the containing blocks (C.B.) in the
following document:</p>

<pre class="html example">
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"&gt;
&lt;HTML&gt;
   &lt;HEAD&gt;
      &lt;TITLE&gt;Illustration of containing blocks&lt;/TITLE&gt;
   &lt;/HEAD&gt;
   &lt;BODY id="body"&gt;
      &lt;DIV id="div1"&gt;
      &lt;P id="p1"&gt;This is text in the first paragraph...&lt;/P&gt;
      &lt;P id="p2"&gt;This is text &lt;EM id="em1"&gt; in the 
      &lt;STRONG id="strong1"&gt;second&lt;/STRONG&gt; paragraph.&lt;/EM&gt;&lt;/P&gt;
      &lt;/DIV&gt;
   &lt;/BODY&gt;
&lt;/HTML&gt;
</pre>

<p>are established as follows:</p>

<table border="1">
<tr><th>For box generated by </th>
<td><strong>C.B. is established by</strong></td></tr>
<tr><td>html</td><td>initial C.B. (UA-dependent)</td></tr>
<tr><td>body</td><td>html</td></tr>
<tr><td>div1</td><td>body</td></tr>
<tr><td>p1</td><td>div1</td></tr>
<tr><td>p2</td><td>div1</td></tr>
<tr><td>em1</td><td>p2</td></tr>
<tr><td>strong1</td><td>p2</td></tr>
</table>

<p>If we position "div1":</p>

<pre class="example">
   #div1 { position: absolute; left: 50px; top: 50px }
</pre>

<p>its containing block is no longer "body"; it becomes
the initial containing block (since there are no
other positioned ancestor boxes).
</p>
<p>If we position "em1" as well:</p>

<pre class="example">
   #div1 { position: absolute; left: 50px; top: 50px }
   #em1  { position: absolute; left: 100px; top: 100px }
</pre>

<p>the table of containing blocks becomes:</p>

<table border="1">
<tr><th>For box generated by</th>
<td><strong>C.B. is established by</strong></td></tr>
<tr><td>html</td><td>initial C.B. (UA-dependent)</td></tr>
<tr><td>body</td><td>html</td></tr>
<tr><td>div1</td><td>initial C.B.</td></tr>
<tr><td>p1</td><td>div1</td></tr>
<tr><td>p2</td><td>div1</td></tr>
<tr><td>em1</td><td>div1</td></tr>
<tr><td>strong1</td><td>em1</td></tr>
</table>

<p>By positioning "em1", its containing block becomes
the nearest positioned ancestor box (i.e., that generated
by "div1"). 
</p>
</div>


<h2><a name="the-width-property">Content width</a>: the <span
class="propinst-width">'width'</span> property</h2>

<!-- #include src=properties/width.srb -->

<p> This property specifies the <a
href="box.html#content-width">content width</a> of boxes.  
</p>
<p>This property does not apply to non-replaced <a
href="visuren.html#inline-boxes">inline</a> elements. The
content width
of a non-replaced inline element's boxes is that of the rendered
content within them (<em>before</em> any relative offset of
children). Recall that inline boxes flow into <a
href="visuren.html#line-box">line boxes</a>. The width of line boxes
is given by the their <a
href="visuren.html#containing-block">containing block</a>, but may be
shorted by the presence of <a href="visuren.html#floats">floats</a>.
</p>
<p>Values have the following meanings:</p>

<dl>
<dt><span class="index-inst" title="&lt;length&gt;"><span class="value-inst-length"><strong>&lt;length&gt;</strong></span></span>
</dt>
<dd>Specifies the width of the content area using a length unit.
</dd>
<dt><span class="index-inst" title="&lt;percentage&gt;"><span class="value-inst-percentage"><strong>&lt;percentage&gt;</strong></span></span>
</dt>
<dd>Specifies a percentage width. The percentage is calculated
with respect to the width of the generated box's 
<a href="visuren.html#containing-block">containing block</a>.
If the containing block's width depends on this element's width, then
the resulting layout is undefined in CSS 2.2.
<span class="note">
Note: For absolutely positioned elements whose containing block is
based on a block container element, the percentage is calculated with
respect to the width of the <em>padding box</em> of that element.
This is a change from CSS1, where the percentage width was always
calculated with respect to the <em>content box</em> of the parent
element.
</span>
</dd>
<dt><strong>auto</strong>
</dt>
<dd>The width depends on the values of other properties. 
See the sections below.
</dd>
</dl>

<p>Negative values for <span class="propinst-width">'width'</span> are
illegal. 
</p>
<div class="example"><p>
For example, the following rule fixes the content width of paragraphs
at 100 pixels:</p>

<pre>
p { width: 100px }
</pre>
</div>

<h2><a name="Computing_widths_and_margins">Calculating widths and
margins</a></h2>

<p>The values of an element's <span
class="propinst-width">'width'</span>, <span
class="propinst-margin-left">'margin-left'</span>, <span
class="propinst-margin-right">'margin-right'</span>, <span
class="propinst-left">'left'</span> and <span
class="propinst-right">'right'</span> properties as used for layout
depend on the type of box generated and on each other. (The value used
for layout is sometimes referred to as the <a
href="cascade.html#usedValue">used value</a>.) In
principle, the values used are the same as the computed values, with
'auto' replaced by some suitable value, and percentages calculated
based on the containing block, but there are exceptions. The following
situations need to be distinguished:</p>

    <ol>
      <li>inline, non-replaced elements</li>
      <li>inline, replaced elements</li>
      <li>block-level, non-replaced elements in normal flow</li>
      <li>block-level, replaced elements in normal flow</li>
      <li>floating, non-replaced elements</li>
      <li>floating, replaced elements</li>
      <li>absolutely positioned, non-replaced elements</li>
      <li>absolutely positioned, replaced elements</li>
      <li>'inline-block', non-replaced elements in normal flow</li>
      <li>'inline-block', replaced elements in normal flow</li>
    </ol>

<p>For Points 1-6 and 9-10, the values of 'left' and 'right' in the
case of relatively positioned elements are determined by the rules in <a
href="visuren.html#relative-positioning">section 9.4.3.</a>
</p>

<p class=note><em><strong>Note.</strong> The used value of 'width'
calculated below is a tentative value, and may have to be calculated
multiple times, depending on <span
class="propinst-min-width">'min-width'</span> and <span
class="propinst-max-width">'max-width'</span>, see the section <a
href="#min-max-widths">Minimum and maximum widths</a> below.</em>

<h3><a name="inline-width">Inline, non-replaced elements</a></h3>

<p>The <span class="propinst-width">'width'</span> property does not
apply. A computed value of 'auto' for <span
class="propinst-margin-left">'margin-left'</span> or <span
class="propinst-margin-right">'margin-right'</span> becomes a used
value of '0'.
</p>

<h3><a name="inline-replaced-width">Inline, replaced elements</a></h3>

<p>A computed value of 'auto' for <span
class="propinst-margin-left">'margin-left'</span> or <span
class="propinst-margin-right">'margin-right'</span> becomes a used
value of '0'.

<p>If <span class="propinst-height">'height'</span> and <span
class="propinst-width">'width'</span> both have computed values of
'auto' and the element also has an intrinsic width, then that
intrinsic width is the used value of <span
class="propinst-width">'width'</span>.

<p>If <span class="propinst-height">'height'</span> and <span
class="propinst-width">'width'</span> both have computed values of
'auto' and the element has no intrinsic width, but does have an
intrinsic height and intrinsic ratio; or if <span
class="propinst-width">'width'</span> has a computed value of 'auto',
<span class="propinst-height">'height'</span> has some other computed
value, and the element does have an intrinsic ratio; then the used
value of <span class="propinst-width">'width'</span> is:

<blockquote><p>(used height) * (intrinsic ratio)</blockquote>

<p>If 'height' and <span class="propinst-width">'width'</span> both
have computed values of 'auto' and the element has an intrinsic ratio
but no intrinsic height or width, then the used value of 'width' is
undefined in CSS&nbsp;2.2.
However, it is suggested that, if the containing block's width
does not itself depend on the replaced element's width, then the used
value of 'width' is calculated from the constraint equation used for
block-level, non-replaced elements in normal flow.

<p>Otherwise, if <span class="propinst-width">'width'</span> has a
computed value of 'auto', and the element has an intrinsic width, then
that intrinsic width is the used value of <span
class="propinst-width">'width'</span>.

<p>Otherwise, if <span class="propinst-width">'width'</span> has a
computed value of 'auto', but none of the conditions above are met,
then the used value of <span class="propinst-width">'width'</span>
becomes 300px. If 300px is too wide to fit the device, UAs should use
the width of the largest rectangle that has a 2:1 ratio and fits the
device instead.


<h3><a name="blockwidth">Block-level, non-replaced elements in normal
flow</a></h3>

<p>The following <a name="width-constraints">constraints</a> must hold
among the used values of the other properties:</p>
<blockquote>
<p><span class="propinst-margin-left">'margin-left'</span> + <span
class="propinst-border-left-width">'border-left-width'</span> + <span
class="propinst-padding-left">'padding-left'</span> + <span
class="propinst-width">'width'</span> + <span
class="propinst-padding-right">'padding-right'</span> + <span
class="propinst-border-right-width">'border-right-width'</span> +
<span class="propinst-margin-right">'margin-right'</span> = width of <a
href="#containing-block-details">containing block</a>
</p>
</blockquote>
 <p>If 'width' is not 'auto' and 'border-left-width' + 'padding-left' +
'width' + 'padding-right' + 'border-right-width' (plus any of
'margin-left' or 'margin-right' that are not 'auto') is larger than
the width of the containing block, then any 'auto' values for
'margin-left' or 'margin-right' are, for the following rules, treated
as zero.
</p>
<p>If
all of the above have a computed value other than 'auto', the values
are said to be "over-constrained" and one of the used values will
have to be different from its computed value. If the <span
class="propinst-direction">'direction'</span> 
property of the containing block has the value 'ltr', the specified
value of <span
class="propinst-margin-right">'margin-right'</span> is ignored and the
value is calculated so as to make the equality true. If the value of
<span class="propinst-direction">'direction'</span> is 'rtl', this
happens to <span class="propinst-margin-left">'margin-left'</span> instead.
</p>
<p>If there is exactly one value specified as 'auto', its used
value follows from the equality.
</p>
<p>If <span class="propinst-width">'width'</span> is set to 'auto',
any other 'auto' values become '0' and <span
class="propinst-width">'width'</span> follows from the resulting
equality.
</p>
<p>If both <span class="propinst-margin-left">'margin-left'</span> and
<span class="propinst-margin-right">'margin-right'</span> are 'auto',
their used values are equal. This horizontally centers the element
with respect to the edges of the containing block.
</p>

<h3><a name="block-replaced-width">Block-level, replaced elements in normal flow</a></h3>

<p>The used value of 
<span class="propinst-width">'width'</span> is determined
as for <a href="#inline-replaced-width">inline replaced 
elements</a>.
Then the rules <a href="#blockwidth">for non-replaced
block-level elements</a> are applied to determine the margins.
</p>
<h3><a name="float-width">Floating, non-replaced elements</a></h3>

<p>If <span
class="propinst-margin-left">'margin-left'</span>, or <span
class="propinst-margin-right">'margin-right'</span> are computed as
'auto', their used value is '0'.
</p>
<p>If <span class="propinst-width">'width'</span> is computed as
'auto', the used value is the "shrink-to-fit" width.
</p>
<p><a name="shrink-to-fit-float"></a> Calculation of the shrink-to-fit
width is similar to calculating the width of a table cell using the
automatic table layout algorithm. Roughly: calculate the preferred
width by formatting the content without breaking lines other than
where explicit line breaks occur, and also calculate the preferred
<em>minimum</em> width, e.g., by trying all possible line breaks.
CSS&nbsp;2.2 does not define the exact algorithm. Thirdly, find the
<em>available width</em>: in this case, this is the width of the
containing block minus the used values of 'margin-left',
'border-left-width', 'padding-left', 'padding-right',
'border-right-width', 'margin-right', and the widths of any relevant
scroll bars.
</p>
<p>Then the shrink-to-fit width is: min(max(preferred minimum width,
available width), preferred width).</p>

<h3><a name="float-replaced-width">Floating, replaced elements</a></h3>

<p>If <span class="propinst-margin-left">'margin-left'</span> or <span
class="propinst-margin-right">'margin-right'</span> are computed as
'auto', their used value is '0'. The used value of <span
class="propinst-width">'width'</span> is determined as for <a
href="#inline-replaced-width">inline replaced elements</a>.
</p>
<h3><a name="abs-non-replaced-width">Absolutely positioned, non-replaced elements</a></h3>

<p>For the purposes of this section and the next, the term <a
name=static-position><span class=index>"static position"</span></a>
(of an element) refers, roughly,
to the position an element would have had in the normal flow. More
precisely:
</p>
<ul>
<li>The <dfn>static-position containing block</dfn> is the containing
block of a hypothetical box that would have been the first box of the
element if its specified <span
class="propinst-position">'position'</span> value had been 'static'
and its specified 'float' had been 'none'. (Note that due to the rules
in <a href="visuren.html#dis-pos-flo">section&nbsp;9.7</a> this
hypothetical calculation might require also assuming a different
computed value for 'display'.)
</li>
<li>The static position for 'left' is the distance from the left edge
of the containing block to the left margin edge of a hypothetical box
that would have been the first box of the element if its <span
class="propinst-position">'position'</span> property had been 'static'
and <span class="propinst-float">'float'</span> had been 'none'. The
value is negative if the hypothetical
box is to the left of the containing block.
</li>
<li>The static position for 'right' is the distance from the right
edge of the containing block to the right margin edge of the same
hypothetical box as above. The value is positive if the hypothetical
box is to the left of the containing block's edge.
</li>
</ul>

<p>But rather than actually calculating the dimensions of that
hypothetical box, user agents are free to make a guess at its probable
position.
</p>
<p>For the purposes of calculating the static position, the containing
block of fixed positioned elements is the initial containing block
instead of the viewport, and all scrollable boxes should be assumed to
be scrolled to their origin.

<p>The constraint that determines the used values for these
elements is:</p>

  <blockquote> 
    <p>'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width'
+ 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width
 of containing block </p>
  </blockquote>
  
<p>If all three of 'left', 'width', and 'right' are 'auto': First set
any 'auto' values for 'margin-left' and 'margin-right' to 0. Then, if
the 'direction' property of the element establishing the
static-position containing block is 'ltr' set 'left'
to the <a
href="#static-position">static position</a> and apply rule number
three below; otherwise, set 'right' to the <a
href="#static-position">static position</a> and apply rule number
one below.</p>

<p>If none of the three is 'auto': If both 'margin-left' and
'margin-right' are 'auto', solve the
equation under the extra constraint that the two margins get equal
values, unless this would make them negative, in which case when
direction of the containing block is 'ltr' ('rtl'), set 'margin-left'
('margin-right') to zero
and solve for 'margin-right' ('margin-left'). If one of
'margin-left' or 'margin-right' is 'auto', solve the equation for that
value. If the values are over-constrained, ignore the value for 'left'
(in case the 'direction' property of the containing block is 'rtl') or
'right' (in case 'direction' is
'ltr') and solve for that value.</p>

<p>Otherwise, set 'auto' values for 'margin-left' and 'margin-right'
to 0, and pick the one of the following six rules that applies.</p>

<ol>

<li>'left' and 'width' are 'auto' and 'right' is not 'auto', then the
width is shrink-to-fit. Then solve for 'left'</li>

<li>'left' and 'right' are 'auto' and 'width' is not 'auto', then if
the 'direction' property of the element establishing the
static-position containing block is 'ltr' set 'left'
to the <a
href="#static-position">static position</a>, otherwise set 'right'
to the <a href="#static-position">static position</a>. Then solve
for 'left' (if 'direction is 'rtl') or 'right' (if 'direction' is
'ltr').</li>

<li>'width' and 'right' are 'auto' and 'left' is not 'auto', then the
width is shrink-to-fit . Then solve for 'right'</li>

<li>'left' is 'auto', 'width' and 'right' are not 'auto', then solve for
'left'</li>

<li>'width' is 'auto', 'left' and 'right' are not 'auto', then solve
for 'width'</li>

<li>'right' is 'auto', 'left' and 'width' are not 'auto', then solve
for 'right'</li>
</ol>
  
<p>Calculation of the shrink-to-fit width is similar to calculating
the width of a table cell using the automatic table layout algorithm.
Roughly: calculate the preferred width by formatting the content
without breaking lines other than where explicit line breaks occur,
and also calculate the preferred <em>minimum</em> width, e.g., by
trying all possible line breaks. CSS&nbsp;2.2 does not define the
exact algorithm. Thirdly, calculate the <em>available width</em>: this
is found by solving for 'width' after setting 'left' (in case 1) or
'right' (in case 3) to 0.</p>

<p>Then the shrink-to-fit width is: min(max(preferred minimum width, available
width), preferred width).</p>

<h3><a name="abs-replaced-width">Absolutely positioned, replaced elements</a></h3>

<p>In this case, <a href="#abs-non-replaced-width">section 10.3.7</a>
applies up through and including the constraint equation, but the rest
of <a href="#abs-non-replaced-width">section 10.3.7</a> is replaced by
the following rules:

<ol>
<li>The used value of <span class="propinst-width">'width'</span> is
determined as for <a href="#inline-replaced-width">inline replaced
elements</a>.
If <span class="propinst-margin-left">'margin-left'</span> or <span
class="propinst-margin-right">'margin-right'</span> is specified as
'auto' its used value is determined by the rules below.
</li>
<li>If both <span class="propinst-left">'left'</span> and <span
class="propinst-right">'right'</span> have the value 'auto', then if
the 'direction' property of the element establishing the
static-position containing block is 'ltr', set <span
class="propinst-left">'left'</span> to
the static position; else if 'direction' is 'rtl', set <span
class="propinst-right">'right'</span> to the static position.
</li>
<li>If <span class="propinst-left">'left'</span> or <span
class="propinst-right">'right'</span> are 'auto', replace any 'auto'
on <span class="propinst-margin-left">'margin-left'</span> or <span
class="propinst-margin-right">'margin-right'</span> with '0'.
</li>
<li>If at this point both <span
class="propinst-margin-left">'margin-left'</span> and <span
class="propinst-margin-right">'margin-right'</span> are still 'auto',
solve the equation under the extra constraint that the two margins
must get equal values, unless this would make them negative, in which
case when the direction of the containing block is 'ltr' ('rtl'), set
<span
class="propinst-margin-left">'margin-left'</span> (<span
class="propinst-margin-right">'margin-right'</span>) to zero and solve
for <span class="propinst-margin-right">'margin-right'</span> (<span
class="propinst-margin-left">'margin-left'</span>).
</li>
<li>If at this point there is an 'auto' left, solve the equation 
for that value.
</li>
<li>If at this point the values are over-constrained, ignore the value
for either <span class="propinst-left">'left'</span> (in case the
<span class="propinst-direction">'direction'</span> property of the
containing block is 'rtl') or <span
class="propinst-right">'right'</span> (in case <span
class="propinst-direction">'direction'</span> is 'ltr') and solve for
that value.
</li>
</ol>


<h3><a name="inlineblock-width">'Inline-block', non-replaced elements in normal flow</a></h3>

<p>If <span class="propinst-width">'width'</span> is 'auto', the
used value is the <a href="#shrink-to-fit-float">shrink-to-fit</a>
width as for floating elements.
</p>
<p>A computed value of 'auto' for <span
class="propinst-margin-left">'margin-left'</span> or <span
class="propinst-margin-right">'margin-right'</span> becomes a used
value of '0'.
</p>

<h3><a name="inlineblock-replaced-width">'Inline-block', replaced elements in normal flow</a></h3>

<p>Exactly as <a href="#inline-replaced-width">inline replaced
elements.</a>
</p>

<h2><a name="min-max-widths">Minimum and maximum widths</a>: <span
class="propinst-min-width">'min-width'</span> and <span
class="propinst-max-width">'max-width'</span></h2>

<!-- #include src=properties/min-width.srb -->
<!-- #include src=properties/max-width.srb -->

<p>These two properties allow authors to constrain content widths to a
certain range. Values have the following meanings:</p>

<dl>
<dt><span class="index-inst" title="&lt;length&gt;"><span class="value-inst-length"><strong>&lt;length&gt;</strong></span></span>
</dt>
<dd>Specifies a fixed minimum or maximum used width.
</dd>
<dt><span class="index-inst" title="&lt;percentage&gt;"><span class="value-inst-percentage"><strong>&lt;percentage&gt;</strong></span></span>
</dt>
<dd>Specifies a percentage for determining the used value. The
percentage is calculated with respect to the width of the generated
box's <a href="visuren.html#containing-block">containing block</a>.
If the containing block's width is negative, the used value is
zero.
If the containing block's width depends on this element's width,
then the resulting layout is undefined in CSS 2.2.
</dd>
<dt><strong>none</strong>
</dt>
<dd>(Only on <span class="propinst-max-width">'max-width'</span>) No
limit on the width of the box.
</dd>
</dl>

<p>Negative values for <span
class="propinst-min-width">'min-width'</span> and <span
class="propinst-max-width">'max-width'</span> are illegal.
</p>

<p>In CSS&nbsp;2.2, the effect of 'min-width' and 'max-width' on
tables, inline tables,
table cells, table columns, and column groups is undefined.

<p>The following algorithm describes how the two properties influence
the <a href="cascade.html#computed-value">used value</a>
of the <span class="propinst-width">'width'</span> property:</p>
<ol>

<li>The tentative used width is calculated (without <span
class="propinst-min-width">'min-width'</span> and <span
class="propinst-max-width">'max-width'</span>) following the rules
under <a href="#Computing_widths_and_margins">"Calculating widths and
margins"</a> above.
</li>
<li>If the tentative used width is greater than <span
class="propinst-max-width">'max-width'</span>, the rules <a
href="#Computing_widths_and_margins">above</a> are applied again, but
this time using the computed value of <span
class="propinst-max-width">'max-width'</span> as the computed value
for <span class="propinst-width">'width'</span>.
</li>
<li>If the resulting width is smaller than <span
class="propinst-min-width">'min-width'</span>, the rules <a
href="#Computing_widths_and_margins">above</a> are applied again, but
this time using the value of <span
class="propinst-min-width">'min-width'</span> as the computed value
for <span class="propinst-width">'width'</span>.
</li>
</ol>

<p class="note">These steps do not affect the real computed values of
the above properties.</p>

<p>However, for replaced elements with an intrinsic ratio and both
<span
class="propinst-width">'width'</span> and <span
class="propinst-height">'height'</span> specified as 'auto', the
algorithm is as follows:
</p>

<p>Select from the table the resolved height and width values for the
appropriate constraint violation. Take the <var>max-width</var> and
<var>max-height</var> as max(min, max) so that <var>min</var> &#8804;
<var>max</var> holds true.
In this table <var>w</var> and <var>h</var> stand for the results of
the width and height computations ignoring the <span
class="propinst-min-width">'min-width'</span>, <span
class="propinst-min-height">'min-height'</span>, <span
class="propinst-max-width">'max-width'</span> and <span
class="propinst-max-height">'max-height'</span> properties. Normally
these are the intrinsic width and height, but they may not be in the
case of replaced elements with intrinsic ratios.

<p class=note>Note: In cases where an explicit width or height is
set and the other dimension is auto, applying a minimum or maximum
constraint on the auto side can cause an over-constrained situation. 
The spec is clear in the behavior but it might not be what the author
expects. The CSS3 object-fit property can be used to obtain different
results in this situation.

<table rules=all>
<thead>
  <tr><th>Constraint Violation</th><th>Resolved Width</th><th>Resolved Height</th></tr>
</thead>
<tbody>

  <tr><td>none</td>
      <td><var>w</var></td>
      <td><var>h</var></td></tr>
  <tr><td><var>w&nbsp;>&nbsp;max-width</var></td>
      <td><var>max-width</var></td>

      <td><var>max(max-width&nbsp;*&nbsp;h/w, min-height)</var></td></tr>
  <tr><td><var>w&nbsp;&lt;&nbsp;min-width</var></td>
      <td><var>min-width</var></td>
      <td><var>min(min-width&nbsp;*&nbsp;h/w, max-height)</var></td></tr>

  <tr><td><var>h&nbsp;>&nbsp;max-height</var></td>
      <td><var>max(max-height&nbsp;*&nbsp;w/h, min-width)</var></td>
      <td><var>max-height</var></td></tr>
  <tr><td><var>h&nbsp;&lt;&nbsp;min-height</var></td>

      <td><var>min(min-height&nbsp;*&nbsp;w/h, max-width)</var></td>
      <td><var>min-height</var></td></tr>
  <tr><td>(<var>w&nbsp;>&nbsp;max-width</var>) and (<var>h&nbsp;>&nbsp;max-height</var>), where (<var>max-width/w&nbsp;&#8804;&nbsp;max-height/h</var>)</td>

      <td><var>max-width</var></td>
      <td><var>max(min-height, max-width&nbsp;*&nbsp;h/w)</var></td></tr>
  <tr><td>(<var>w&nbsp;>&nbsp;max-width</var>) and (<var>h&nbsp;>&nbsp;max-height</var>), where (<var>max-width/w&nbsp;>&nbsp;max-height/h</var>)</td>

      <td><var>max(min-width, max-height&nbsp;*&nbsp;w/h)</var></td>
      <td><var>max-height</var></td></tr>
  <tr><td>(<var>w&nbsp;&lt;&nbsp;min-width</var>) and (<var>h&nbsp;&lt;&nbsp;min-height</var>), where (<var>min-width/w&nbsp;&#8804;&nbsp;min-height/h</var>)</td>

      <td><var>min(max-width, min-height&nbsp;*&nbsp;w/h)</var></td>
      <td><var>min-height</var></td></tr>
  <tr><td>(<var>w&nbsp;&lt;&nbsp;min-width</var>) and (<var>h&nbsp;&lt;&nbsp;min-height</var>), where (<var>min-width/w&nbsp;>&nbsp;min-height/h</var>)</td>

      <td><var>min-width</var></td>
      <td><var>min(max-height, min-width&nbsp;*&nbsp;h/w)</var></td></tr>
  <tr><td>(<var>w&nbsp;&lt;&nbsp;min-width</var>) and (<var>h&nbsp;>&nbsp;max-height</var>)</td>

      <td><var>min-width</var></td>
      <td><var>max-height</var></td></tr>
  <tr><td>(<var>w&nbsp;>&nbsp;max-width</var>) and (<var>h&nbsp;&lt;&nbsp;min-height</var>)</td>

      <td><var>max-width</var></td>
      <td><var>min-height</var></td></tr>
</tbody>
</table>

<p>Then apply the rules under <a
href="#Computing_widths_and_margins">"Calculating widths and
margins"</a> above, as if <span class="propinst-width">'width'</span>
were computed as this value.


<!--
<ol>
<li>Select from the following list of width-height pairs (a, b) the
first one that satisfies the two constraints min-width &#8804; a
&#8804; max(min-width, max-width) and min-height &#8804; b &#8804;
max(min-height, max-height). The resulting pair gives the used width
and height for the element. In this list, Wi and Hi stand for the
intrinsic width and height, respectively.
<ol>
<li>(Wi, Hi)</li>
<li>(max(Wi, min-width), max(Wi, min-width)*Hi/Wi)</li>
<li>(max(Hi, min-height)*Wi/Hi, max(Hi, min-height))</li>
<li>(min(Wi, max-width), min(Wi, max-width)*Hi/Wi)</li>
<li>(min(Hi, max-height)*Wi/Hi, min(Hi, max-height))</li>
<li>(max(Wi, min-width), min(Hi, max-height))</li>
<li>(min(Wi, max-width), max(Hi, min-height))</li>
<li>(max(Wi, min-width), max(Hi, min-height))</li>
<li>(min(Wi, max-width), min(Hi, max-height))</li>
</ol>
</li>
<li>Then apply the rules under <a
href="#Computing_widths_and_margins">"Calculating widths and
margins"</a> above, as if <span class="propinst-width">'width'</span>
were computed as this value.
</li>
</ol>
-->


<h2><a name="the-height-property">Content height</a>: the <span
class="propinst-height">'height'</span> property</h2>

<!-- #include src=properties/height.srb -->

<p> This property specifies the <a
href="box.html#content-height">content height</a> of boxes.

<p>This property does not apply to non-replaced <a
href="visuren.html#inline-boxes">inline</a> elements. See the <a
href="#inline-non-replaced">section on computing heights and margins
for non-replaced inline elements</a> for the rules used instead.
</p>
<p>Values have the following meanings:</p>

<dl>
<dt><span class="index-inst" title="&lt;length&gt;"><span class="value-inst-length"><strong>&lt;length&gt;</strong></span></span>
</dt>
<dd>Specifies the height of the content area using a length value.
</dd>
<dt><span class="index-inst" title="&lt;percentage&gt;"><span class="value-inst-percentage"><strong>&lt;percentage&gt;</strong></span></span>
</dt>
<dd>Specifies a percentage height. The percentage is calculated with
respect to the height of the generated box's <a
href="visuren.html#containing-block">containing block</a>. If the
height of the containing block is not specified explicitly (i.e., it
depends on content height), and this element is not absolutely
positioned, the used height is calculated as if 'auto' was specified.
A percentage height
on the <a href="conform.html#root">root element</a> is relative to the
<a href="#containing-block-details">initial containing block</a>.
<span class="note">
Note: For absolutely positioned elements whose containing block is
based on a block-level element, the percentage is calculated with
respect to the height of the <em>padding box</em> of that element.
This is a change from CSS1, where the percentage was always
calculated with respect to the <em>content box</em> of the parent
element.
</span>
</dd>
<dt><strong>auto</strong>
</dt>
<dd>The height depends on the values of other properties. 
See the prose below.
</dd>
</dl>

<p class="note">Note that the height of the containing block of an
absolutely positioned element is independent of the size of the
element itself, and thus a percentage height on such an element can
always be resolved. However, it may be that the height is not known
until elements that come later in the document have been processed.
</p>

<p>Negative values for <span class="propinst-height">'height'</span>
are illegal.
</p>
<div class="example"><p>
For example, the following rule sets the content height of paragraphs
to 100 pixels:</p>

<pre>
p { height: 100px }
</pre>

<p>Paragraphs of which the height of the contents exceeds 100 pixels
will <a href="visufx.html#overflow">overflow</a> according to the
<span class="propinst-overflow">'overflow'</span> property.
</p>
</div>

<h2><a name="Computing_heights_and_margins">Calculating heights and
margins</a></h2>

<p>For calculating the values of <span class="propinst-top">'top'</span>, <span class="propinst-margin-top">'margin-top'</span>, <span class="propinst-height">'height'</span>,
<span class="propinst-margin-bottom">'margin-bottom'</span>, and <span class="propinst-bottom">'bottom'</span> a distinction must be made between
various kinds of boxes:
</p>
    <ol>
      <li>inline, non-replaced elements</li>
      <li>inline, replaced elements</li>
      <li>block-level, non-replaced elements in normal flow</li>
      <li>block-level, replaced elements in normal flow</li>
      <li>floating, non-replaced elements</li>
      <li>floating, replaced elements</li>
      <li>absolutely positioned, non-replaced elements</li>
      <li>absolutely positioned, replaced elements</li>
      <li>'inline-block', non-replaced elements in normal flow</li>
      <li>'inline-block', replaced elements in normal flow</li>
    </ol>

<p>For Points 1-6 and 9-10, the used values of 'top' and
'bottom' are determined by the rules in section 9.4.3.
</p>

<p class=note>Note: these rules apply to
the root element just as to any other element.

<p class=note><em><strong>Note.</strong> The used value of 'height'
calculated below is a tentative value, and may have to be calculated
multiple times, depending on <span
class="propinst-min-height">'min-height'</span> and <span
class="propinst-max-height">'max-height'</span>, see the section <a
href="#min-max-heights">Minimum and maximum heights</a> below.</em>

<h3><a name="inline-non-replaced">Inline, non-replaced elements</a></h3>

<p>The <span class="propinst-height">'height'</span> property does not
apply. The height of the content area should be based on the font, but
this specification does not specify how. A UA may, e.g., use the
em-box or the maximum ascender and descender of the font. (The latter
would ensure that glyphs with parts above or below the em-box still
fall within the content area, but leads to differently sized boxes for
different fonts; the former would ensure authors can control
background styling relative to the 'line-height', but leads to glyphs
painting outside their content area.)
</p>
<p class=note>Note: level 3 of CSS will probably include a property to
select which measure of the font is used for the content height.
</p>
<p>The vertical padding, border and margin of an inline, non-replaced
box start at the top and bottom of the content area, and has nothing
to do with the <span
class="propinst-line-height">'line-height'</span>. But only the <span
class="propinst-line-height">'line-height'</span> is used when calculating
the height of the line box.
</p>
<p><a name="multi-font-inline-height"></a> If more than one font is
used (this could happen when glyphs are found in different fonts), the
height of the content area is not defined by this specification.
However, we suggest that the height is chosen such that the content
area is just high enough for either (1) the em-boxes, or (2) the
maximum ascenders and descenders, of <em>all</em> the fonts in the
element. Note that this may be larger than any of the font sizes
involved, depending on the baseline alignment of the fonts.
</p>

<h3><a name="inline-replaced-height">Inline replaced elements</a>,
block-level replaced elements in normal flow, 'inline-block' replaced
elements in normal flow and floating replaced elements</h3>

<p>If <span class="propinst-margin-top">'margin-top'</span>, or <span
class="propinst-margin-bottom">'margin-bottom'</span> are 'auto',
their used value is 0.

<p>If <span class="propinst-height">'height'</span> and <span
class="propinst-width">'width'</span> both have computed values of
'auto' and the element also has an intrinsic height, then that
intrinsic height is the used value of <span
class="propinst-height">'height'</span>.

<p>Otherwise, if <span class="propinst-height">'height'</span> has a
computed value of 'auto', and the element has an intrinsic ratio then
the used value of <span class="propinst-height">'height'</span> is:

<blockquote><p>(used width) / (intrinsic ratio)</blockquote>

<p>Otherwise, if <span class="propinst-height">'height'</span> has a
computed value of 'auto', and the element has an intrinsic height,
then that intrinsic height is the used value of <span
class="propinst-height">'height'</span>.

<p>Otherwise, if <span class="propinst-height">'height'</span> has a
computed value of 'auto', but none of the conditions above are met,
then the used value of <span class="propinst-height">'height'</span>
must be set to the height of the largest rectangle that has a 2:1
ratio, has a height not greater than 150px, and has a width not
greater than the device width.

<!-- Issue 181: remove the following -->
<!-- <p>For 'inline' and 'inline-block' elements, the margin box is used
when calculating the height of the line box. -->
<!-- /Issue 181 -->

<h3><a name="normal-block">Block-level non-replaced elements in normal
flow when 'overflow' computes to 'visible'</a></h3>

<p>This section also applies to block-level non-replaced elements in
normal flow when 'overflow' does not compute to 'visible' but has been
propagated to the viewport.

<p>If <span
class="propinst-margin-top">'margin-top'</span>, or <span
class="propinst-margin-bottom">'margin-bottom'</span> are 'auto',
their used value is 0. If <span
class="propinst-height">'height'</span> is 'auto', the height depends
on whether the element has any block-level children and whether it has
padding or borders:
</p>

<p>The element's height is the distance from its top content edge to
the first applicable of the following:

<ol>
  <li>the bottom edge of the last line box, if the box establishes a
  inline formatting context with one or more lines

  <li>the bottom edge of the bottom (possibly collapsed) margin of its
  last in-flow child, if the child's bottom margin does not collapse
  with the element's bottom margin

  <li>the bottom border edge of the last in-flow child whose top
  margin doesn't collapse with the element's bottom margin

  <li>zero, otherwise
</ol>

<p>Only children in the normal flow are taken into account (i.e.,
floating boxes and absolutely positioned boxes are ignored, and
relatively positioned boxes are considered without their offset). Note
that the child box may be an <a
href="visuren.html#anonymous-block-level">anonymous block box.</a>
</p>

<h3><a name="abs-non-replaced-height">Absolutely positioned, non-replaced elements</a></h3>

<p>For the purposes of this section and the next, the term "static
position" (of an element) refers, roughly, to the position an element
would have had in the normal flow. More precisely, the static position
for 'top' is the distance from the top edge of the containing block to
the top margin edge of a hypothetical box that would have been the
first box of the element if its specified <span
class="propinst-position">'position'</span> value had been 'static'
and its specified <span class="propinst-float">'float'</span> had been
'none' and its specified <span class="propinst-clear">'clear'</span>
had been 'none'. (Note that due to the rules
in <a href="visuren.html#dis-pos-flo">section&nbsp;9.7</a> this might
require also assuming a different computed value for 'display'.)
The value is negative if the hypothetical box is above the containing
block.
</p>
<p>But rather than actually calculating the dimensions of that
hypothetical box, user agents are free to make a guess at its probable
position.
</p>
<p>For the purposes of calculating the static position, the containing
block of fixed positioned elements is the initial containing block
instead of the viewport.

<p>For absolutely positioned elements, the used values of the vertical
dimensions must satisfy this constraint:</p>
 
  <blockquote>      
    <p>'top' + 'margin-top' + 'border-top-width' + 'padding-top' +      'height'
+ 'padding-bottom' + 'border-bottom-width' +      'margin-bottom' + 'bottom'
= height of containing block </p>
  </blockquote>
 
<p>If all three of 'top', 'height', and 'bottom' are auto, set 'top'
to the static position and apply rule number three below.</p>
  
<p>If none of the three are 'auto': If both 'margin-top' and
'margin-bottom' are 'auto', solve the equation under the extra
constraint that the two margins get equal values. If one of
'margin-top' or 'margin-bottom' is 'auto', solve the equation for that
value. If the values are over-constrained, ignore the value for
'bottom' and solve for that value.</p>
  
<p>Otherwise, pick the one of the following six rules that
applies.</p>

<ol>
<li>'top' and 'height' are 'auto' and 'bottom' is not 'auto', then the
height is <a href="#root-height">based on the content per 10.6.7</a>, set 'auto'
values for 'margin-top' and 'margin-bottom' to 0, and solve for 'top'

<li>'top' and 'bottom' are 'auto' and 'height' is not 'auto', then
set 'top' to the static position, set 'auto' values for 'margin-top'
and 'margin-bottom' to 0, and solve for 'bottom'</li>

<li>'height' and 'bottom' are 'auto' and 'top' is not 'auto', then the
height is <a href="#root-height">based on the content per 10.6.7</a>, set 'auto'
values for 'margin-top' and 'margin-bottom' to 0, and solve for
'bottom'</li>

<li>'top' is 'auto', 'height' and 'bottom' are not 'auto', then set
'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for
'top'</li>

<li>'height' is 'auto', 'top' and 'bottom' are not 'auto', then 'auto'
values for 'margin-top' and 'margin-bottom' are set to 0 and solve for
'height'</li>

<li>'bottom' is 'auto', 'top' and 'height' are not 'auto', then set
'auto' values for 'margin-top' and 'margin-bottom' to 0 and solve for
'bottom'</li>
</ol>

<h3><a name="abs-replaced-height">Absolutely positioned, replaced elements</a></h3>

<p>This situation is similar to the previous one, except that the
element has an <a href="conform.html#intrinsic">intrinsic</a> height. The
sequence of substitutions is now:
</p>
<ol>

<li>The used value of <span
class="propinst-height">'height'</span> is determined as for <a
href="#inline-replaced-height">inline replaced elements</a>.
If 'margin-top' or 'margin-bottom' is specified as 'auto' its used
value is determined by the rules below.</li>
<li>If both <span class="propinst-top">'top'</span> and <span
class="propinst-bottom">'bottom'</span> have the value 'auto', replace
<span class="propinst-top">'top'</span> with the element's <a
href="#static-position">static position</a>.
</li>
<li>If <span class="propinst-bottom">'bottom'</span> is 'auto',
replace any 'auto' on <span
class="propinst-margin-top">'margin-top'</span> or <span
class="propinst-margin-bottom">'margin-bottom'</span> with '0'.
</li>
<li>If at this point both <span
class="propinst-margin-top">'margin-top'</span> and <span
class="propinst-margin-bottom">'margin-bottom'</span> are still
'auto', solve the equation under the extra constraint that the two
margins must get equal values.
</li>
<li>If at this point there is only one 'auto' left, solve the equation 
for that value.
</li>
<li>If at this point the values are over-constrained, ignore the value
for <span class="propinst-bottom">'bottom'</span> and solve for that
value.
</li>
</ol>


<h3><a name="block-root-margin">Complicated cases</a></h3>

<p>This section applies to:

<ul>
    <li>Block-level, non-replaced elements in normal flow when
    'overflow' does not compute to 'visible' (except if the 'overflow'
    property's value has been propagated to the viewport).

    <li>'Inline-block', non-replaced elements.

    <li>Floating, non-replaced elements.
</ul>

<p>If <span class="propinst-margin-top">'margin-top'</span>, or <span
class="propinst-margin-bottom">'margin-bottom'</span> are 'auto',
their used value is 0. If <span
class="propinst-height">'height'</span> is 'auto', the <a
href="#root-height">height depends on the element's descendants per 10.6.7</a>.

<p>For 'inline-block' elements, the margin box is used when calculating
the height of the line box.


<h3><a name="root-height">'Auto' heights for block formatting context
roots</a></h3>

<p>In certain cases (see, e.g., sections
<a href="#abs-non-replaced-height">10.6.4</a> and
<a href="#block-root-margin">10.6.6</a> above), the height of an
element that establishes a block formatting context is computed as follows:

<p>If it only has inline-level children, the height is the distance
between the top of the topmost line box and the bottom of the
bottommost line box.
</p>
<p>If it has block-level children, the height is the distance between
the top margin-edge of the topmost block-level child box and the
bottom margin-edge of the bottommost block-level child box.
</p>
<p>Absolutely positioned children are ignored, and relatively
positioned boxes are considered without their offset. Note that the
child box may be an <a
href="visuren.html#anonymous-block-level">anonymous block box.</a>
</p>
<p>In addition, if the element has any floating descendants
whose bottom margin edge is below the element's bottom content edge,
then the height is increased to include those edges.
Only floats that participate in this block formatting context are taken into account,
e.g., floats inside absolutely positioned descendants or other floats are not.
</p>


<h2><a name="min-max-heights">Minimum and maximum heights</a>: <span
class="propinst-min-height">'min-height'</span> and <span
class="propinst-max-height">'max-height'</span></h2>

<p>It is sometimes useful to constrain the height of elements to a
certain range. Two properties offer this functionality:
</p>

<!-- #include src=properties/min-height.srb -->
<!-- #include src=properties/max-height.srb -->

<p>These two properties allow authors to constrain box heights to a
certain range. Values have the following meanings:</p>

<dl>
<dt><span class="index-inst" title="&lt;length&gt;"><span class="value-inst-length"><strong>&lt;length&gt;</strong></span></span>
</dt>
<dd>Specifies a fixed minimum or maximum computed height.
</dd>
<dt><span class="index-inst" title="&lt;percentage&gt;"><span class="value-inst-percentage"><strong>&lt;percentage&gt;</strong></span></span>
</dt>
<dd>Specifies a percentage for determining the used value.
The percentage is calculated with respect to the height of the
generated box's <a href="visuren.html#containing-block">containing block</a>.
If the height of the containing block is not 
specified explicitly (i.e., it depends on content height), and this
element is not absolutely positioned, the
percentage value is treated as '0' (for <span
class="propinst-min-height">'min-height'</span>) or 'none'
(for <span class="propinst-max-height">'max-height'</span>).
</dd>
<dt><strong>none</strong>
</dt>
<dd>(Only on <span class="propinst-max-height">'max-height'</span>) No limit on the height of the box. 
</dd>
</dl>

<p>Negative values for <span
class="propinst-min-height">'min-height'</span> and <span
class="propinst-max-height">'max-height'</span> are illegal.
</p>

<p>In CSS&nbsp;2.2, the effect of 'min-height' and 'max-height' on
tables, inline tables, table cells, table rows, and row groups is undefined.

<p>The following algorithm describes how the two properties influence
the <a href="cascade.html#computed-value">used value</a>
of the <span class="propinst-height">'height'</span> property:</p>

<ol>

<li>The tentative used height is calculated (without <span
class="propinst-min-height">'min-height'</span> and <span
class="propinst-max-height">'max-height'</span>) following the rules
under <a href="#Computing_heights_and_margins">"Calculating heights and
margins"</a> above.
</li>
<li>If this tentative height is greater than <span
class="propinst-max-height">'max-height'</span>, the rules <a
href="#Computing_heights_and_margins">above</a> are applied again, but
this time using the value of <span
class="propinst-max-height">'max-height'</span> as the computed value
for <span class="propinst-height">'height'</span>.
</li>
<li>If the resulting height is smaller than <span
class="propinst-min-height">'min-height'</span>, the rules <a
href="#Computing_heights_and_margins">above</a> are applied again, but
this time using the value of <span
class="propinst-min-height">'min-height'</span> as the computed value
for <span class="propinst-height">'height'</span>.
</li>
</ol>

<p class="note">These steps do not affect the real computed value of
<span class="propinst-height">'height'</span>. Consequently, for
example, they do not affect margin collapsing, which depends on the
computed value.

<p>However, for replaced elements with both <span
class="propinst-width">'width'</span> and <span
class="propinst-height">'height'</span> computed as 'auto', use the
algorithm under <a href="#min-max-widths">Minimum and maximum
widths</a> above to find the used width and height. Then apply the
rules under <a href="#Computing_heights_and_margins">"Computing
heights and margins"</a> above, using the resulting width and height as
if they were the computed values.
</p>
<h2><a name="line-height">Line height calculations</a>: the <span
class="propinst-line-height">'line-height'</span> and <span
class="propinst-vertical-align">'vertical-align'</span>
properties</h2>

<p>As described in the section on <a
href="visuren.html#inline-formatting">inline formatting contexts</a>,
user agents flow inline-level 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-level box in the line box is calculated.
<!-- Issue 181 -->
For replaced elements, inline-block elements, and inline-table
elements, this is the height of their margin box; for inline boxes,
this is their 'line-height'.
<!-- /Issue 181 -->
(See <a href="#Computing_heights_and_margins">"Calculating heights and
margins"</a> and the <a href="#inline-box-height">height of inline
boxes</a> in <a href="#leading">"Leading and half-leading"</a>.)

</li>
<li>The inline-level boxes are aligned vertically according
to their <span class="propinst-vertical-align">'vertical-align'</span>
property.

In case they are aligned 'top' or 'bottom', they must be aligned so as
to minimize the line box height. If such boxes are tall enough, there
are multiple solutions and CSS&nbsp;2.2 does not define the position
of the line box's baseline (i.e., the position of the <a
href="#strut">strut, see below</a>).
</li>
<li>The line box height is the distance between the uppermost
box top and the lowermost box bottom. (This includes the <a
href="#strut">strut,</a> as explained under <span
class="propinst-line-height">'line-height'</span> below.)
</li>
</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>

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

<p>CSS assumes that every font has font metrics that specify a
characteristic height above the baseline and a depth below it. In this
section we use <var>A</var> to mean that height (for a given font at a
given size) and <var>D</var> the depth. We also define <var>AD</var> =
<var>A</var> + <var>D</var>, the distance from the top to the
bottom. (See the note below for <a href="#sTypoAscender">how to find
<var>A</var> and <var>D</var> for TrueType and OpenType fonts.</a>)
Note that these are metrics of the font as a whole and need not
correspond to the ascender and descender of any individual glyph.

<p>User agent must align the glyphs in a non-replaced inline box to
each other by their relevant baselines. Then, for
each glyph, determine the <var>A</var> and <var>D</var>. Note that
glyphs in a single element may come from different fonts and thus need
not all have the same <var>A</var> and <var>D</var>. If the inline box
contains no glyphs at all, it is considered to contain a <a
href="#strut">strut</a> (an invisible glyph of zero width) with the
<var>A</var> and <var>D</var> of the element's first available font.

<p>Still for each glyph, determine the leading <var>L</var> to add,
where <var>L</var> = <span
class="propinst-line-height">'line-height'</span> - <var>AD</var>. Half
the leading is added above <var>A</var> and the other half below
<var>D</var>, giving the glyph and its leading a total height above
the baseline of <var>A'</var> = <var>A</var> + <var>L</var>/2 and a
total depth of <var>D'</var> = <var>D</var> + <var>L</var>/2.

<p class=note><strong>Note.</strong> <var>L</var> may be negative.

<p id="inline-box-height">The height of the inline box encloses all
glyphs and their half-leading on each side and is thus exactly
'line-height'. Boxes of
child elements do not influence this height.

<p>Although margins, borders, and padding of non-replaced elements do
not enter into the line box calculation, they are still rendered
around inline boxes. This means that if the height specified by <span
class="propinst-line-height">'line-height'</span> is less than the
content height of contained boxes, backgrounds and colors of padding
and borders may "bleed" into adjoining line boxes. User agents should
render the boxes in document order. This will cause the borders on
subsequent lines to paint over the borders and text of previous lines.
</p>

<p class=note><em><strong>Note.</strong> CSS&nbsp;2.2 does not define
what the content area of an inline box is (see <a
href="#inline-non-replaced">10.6.1</a> above) and thus different UAs
may draw the backgrounds and borders in different places.</em>

<p id=sTypoAscender class=note><em><strong>Note.</strong> It is
recommended that implementations that use OpenType or TrueType fonts
use the metrics "sTypoAscender" and "sTypoDescender" from the font's
OS/2 table for A and D (after scaling to the current element's font
size). In the absence of these metrics, the "Ascent" and "Descent"
metrics from the HHEA table should be used.</em>

<!-- #include src=properties/line-height.srb -->

<p>On a <a href="visuren.html#block-boxes">block container element</a>
whose content
is composed of <a href="visuren.html#inline-level">inline-level</a>
elements, 'line-height' specifies the <em>minimal</em> height of line boxes
within the element. The minimum height consists of a minimum height above
the baseline and a minimum depth below it, exactly as if each
line box starts with a <a name="strut">zero-width inline box with the
element's font and line height properties.</a> We call that imaginary
box a "strut." (The name is inspired by TeX.).
</p>

<p>The height and depth of the font above and below the baseline are
assumed to be metrics that are contained in the font. (For more
details, see CSS level&nbsp;3.)

<p>On a non-replaced <a
href="visuren.html#inline-boxes">inline</a> element, 'line-height'
specifies the height that is used in the calculation of the line box
height.
</p>
<p>Values for this property have the following meanings:</p>

<dl>
<dt><strong>normal</strong> </dt>
<dd>Tells user agents to set the used
value to a "reasonable" value based on the font of the element. The
value has the same meaning as <span class="index-inst"
title="&lt;number&gt;"><span
class="value-inst-number">&lt;number&gt;</span></span>. We recommend a
used value for 'normal' between 1.0 to 1.2. The <a
href="cascade.html#computed-value">computed value</a> is 'normal'.
</dd>
<dt><span class="index-inst" title="&lt;length&gt;"><span
class="value-inst-length"><strong>&lt;length&gt;</strong></span></span>
</dt>
<dd>The specified length is used in the calculation of the line box
height. Negative values are illegal.
</dd>
<dt><span class="index-inst" title="&lt;number&gt;"><span
class="value-inst-number"><strong>&lt;number&gt;</strong></span></span>
</dt>
<dd>The used value of the property is this number multiplied by the
element's font size. Negative values are illegal. The <a
href="cascade.html#computed-value">computed value</a> is the same as
the specified value.
</dd>
<dt><span class="index-inst" title="&lt;percentage&gt;"><span
class="value-inst-percentage"><strong>&lt;percentage&gt;</strong></span></span>
</dt>
<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.
</dd>
</dl>

<div class="example"><p>
The three rules in the example below have the same resultant line height:
</p>
<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 may determine the 'normal' <span
class="propinst-line-height">'line-height'</span> value according to
the largest font size.
</p>
<p class=note><em><strong>Note.</strong> When there is only one value of <span
class="propinst-line-height">'line-height'</span> for all inline
boxes in a block container box and they are all in the same font (and
there are no replaced elements, inline-block
elements, etc.), the above will ensure that
baselines of successive lines are exactly <span
class="propinst-line-height">'line-height'</span> apart. This is
important when columns of text in different fonts have to be aligned,
for example in a table.</em>
</p>
<!-- #include src=properties/vertical-align.srb -->

<p>This property affects the vertical positioning inside a line box of
the boxes generated by an inline-level element.</p>
 
<div class="note"><p>
<em><strong>Note.</strong> Values of this property have
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>
</p>
</div>

<p>The following values only have meaning with respect to a parent
inline element, or to the <a href="#strut">strut</a> of a parent
block container element.

<p>In the following definitions, for inline non-replaced elements, the
box used for alignment is the box whose height is the 'line-height'
(containing the box's glyphs and the half-leading on each side, see <a
href="#inline-box-height">above</a>). For all other elements, the box
used for alignment is the margin box.

<dl>
  <dt><strong>baseline</strong></dt>
  <dd>Align the baseline of the box with the baseline of
      the parent box. If the box does not have a baseline, align the
      bottom margin edge with the parent's baseline.</dd>
  <dt><strong>middle</strong></dt>
  <dd>Align the vertical midpoint of the box with the baseline
      of the parent box plus half the x-height of the parent.</dd>
  <dt><strong>sub</strong></dt>
  <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.)</dd>
  <dt><strong>super</strong></dt>
  <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.)</dd>
  <dt><strong>text-top</strong></dt>
  <dd>Align the top of the box with the top of the parent's content
      area (see <a href="#inline-non-replaced">10.6.1</a>).</dd>
  <dt><strong>text-bottom</strong></dt>
  <dd>Align the bottom of the box with the bottom of the parent's
      content area (see <a
      href="#inline-non-replaced">10.6.1</a>).</dd>
  <dt><span class="index-inst" title="&lt;percentage&gt;"><span
  class="value-inst-percentage"><strong>&lt;percentage&gt;
  </strong></span></span></dt>
  <dd>Raise (positive value) or lower (negative value) the box
      by this distance (a percentage of the <span
      class="propinst-line-height">'line-height'</span> value).
      The value '0%' means the same as 'baseline'.</dd>
  <dt><span class="index-inst" title="&lt;length&gt;"><span
  class="value-inst-length"><strong>&lt;length&gt;
  </strong></span></span></dt>
  <dd>Raise (positive value) or lower (negative value) the box
      by this distance.
      The value '0cm' means the same as 'baseline'.
  </dd>
</dl>
<p>The following values align the element relative to the line box.
Since the element may have children aligned relative to it (which in
turn may have descendants aligned relative to them), these values use
the bounds of the aligned subtree. The <dfn>aligned subtree</dfn> of
an inline element contains that element and the aligned subtrees of
all children inline elements whose computed 'vertical-align' value is
not 'top' or 'bottom'. The top of the aligned subtree is the highest
of the tops of the boxes in the subtree, and the bottom is analogous.
<dl>
  <dt><strong>top</strong></dt>
  <dd>Align the top of the aligned subtree with the top of the line box.</dd>
  <dt><strong>bottom</strong></dt>
  <dd>Align the bottom of the aligned subtree with the bottom of the
  line box.</dd>
</dl>

<p>The baseline of an 'inline-table' is the baseline of the first row
of the table.
</p>
<p>The baseline of an 'inline-block’ whose ‘overflow’ property has a
computed value of ‘visible’ is the baseline of its last line box in
the normal flow, unless it has no in-flow line boxes, in which case
the baseline is the bottom margin edge. The baseline of an
inline-block whose ‘overflow’ property has a computed value not equal
to ‘visible’ is the higher of either its bottom margin edge or the
baseline of its last line box in the normal flow, unless it has no
in-flow line boxes, in which case its baseline is the baseline is the
bottom margin edge.</p>
</body>
</html>

<!-- Keep this comment at the end of the file
Local variables:
mode: sgml
sgml-omittag:t
sgml-shorttag:nil
sgml-minimize-attributes:nil
sgml-always-quote-attributes:t
sgml-indent-step:nil
sgml-indent-data:t
sgml-parent-document:nil
sgml-exposed-tags:nil
sgml-local-catalogs:nil
sgml-local-ecat-files:nil
End:
-->