visudet.html

CSS lets learn this step by step...

<P>Points 1-6 include relative positioning.

<H3><a name="q15">10.6.1 Inline, non-replaced elements</a></H3>

<p>If <a href="visuren.html#propdef-top" class="noxref"><span class="propinst-top">'top'</span></a>, <a href="visuren.html#propdef-bottom" class="noxref"><span
class="propinst-bottom">'bottom'</span></a>, <a href="box.html#propdef-margin-top" class="noxref"><span
class="propinst-margin-top">'margin-top'</span></a>, or <a href="box.html#propdef-margin-bottom" class="noxref"><span
class="propinst-margin-bottom">'margin-bottom'</span></a> are 'auto',
their computed value is 0. The <a href="visudet.html#propdef-height" class="noxref"><span
class="propinst-height">'height'</span></a> property doesn't apply, but
the height of the box is given by the <a href="visudet.html#propdef-line-height" class="noxref"><span
class="propinst-line-height">'line-height'</span></a> property.

<H3><a name="q16">10.6.2 Inline, replaced elements
block-level, replaced elements in normal flow, and
floating, replaced elements</a></H3>

<p>If <a href="visuren.html#propdef-top" class="noxref"><span class="propinst-top">'top'</span></a>, <a href="visuren.html#propdef-bottom" class="noxref"><span
class="propinst-bottom">'bottom'</span></a>, <a href="box.html#propdef-margin-top" class="noxref"><span
class="propinst-margin-top">'margin-top'</span></a>, or <a href="box.html#propdef-margin-bottom" class="noxref"><span
class="propinst-margin-bottom">'margin-bottom'</span></a> are 'auto',
their computed value is 0. If <a href="visudet.html#propdef-height" class="noxref"><span
class="propinst-height">'height'</span></a> is 'auto', the computed value
is the <a href="conform.html#intrinsic">intrinsic</a> height.

<H3><a name="q17">10.6.3 Block-level, non-replaced elements in normal flow, and
floating, non-replaced elements</a></H3>

<p>If <a href="visuren.html#propdef-top" class="noxref"><span class="propinst-top">'top'</span></a>, <a href="visuren.html#propdef-bottom" class="noxref"><span class="propinst-bottom">'bottom'</span></a>, <a href="box.html#propdef-margin-top" class="noxref"><span class="propinst-margin-top">'margin-top'</span></a>, or <a href="box.html#propdef-margin-bottom" class="noxref"><span class="propinst-margin-bottom">'margin-bottom'</span></a> are 'auto',
their computed value is 0. If <a href="visudet.html#propdef-height" class="noxref"><span class="propinst-height">'height'</span></a> is 'auto', the height depends
on whether the element has any block-level children. If it only has
inline-level children, the height is from the top of the topmost line
box to the bottom of the bottommost line box. If it has block-level
children, it is the distance from the top border-edge of the topmost
block-level child box, to the bottom border-edge of the bottommost
block-level child box. 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 box.</a>

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

<p>For absolutely positioned elements, the vertical dimensions must
satisfy this constraint:
<blockquote>
<p>'top' + 'margin-top' + 'border-top-width' + 'padding-top' +
'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom'
+ 'bottom' = height of containing block
</blockquote>
<p>(If the border style is 'none', use '0' as the border width.) The
solution to this constraint is reached through a number of
substitutions in the following order:

<ol>
<li>If <a href="visuren.html#propdef-top" class="noxref"><span class="propinst-top">'top'</span></a> has the value 'auto'
replace it with 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 <a href="visuren.html#propdef-position" class="noxref"><span
class="propinst-position">'position'</span></a> property had been
'static'. (But rather than actually computing that box, user agents are free
to make a guess at its probable position.) The value is negative if
the hypothetical box is above the containing block.

<li>If both <a href="visudet.html#propdef-height" class="noxref"><span class="propinst-height">'height'</span></a> and <a href="visuren.html#propdef-bottom" class="noxref"><span
class="propinst-bottom">'bottom'</span></a> are 'auto', replace <a href="visuren.html#propdef-bottom" class="noxref"><span class="propinst-bottom">'bottom'</span></a>
with 0.

<li>If <a href="visuren.html#propdef-bottom" class="noxref"><span class="propinst-bottom">'bottom'</span></a> or <a href="visudet.html#propdef-height" class="noxref"><span
class="propinst-height">'height'</span></a> are (still) 'auto', replace
any 'auto' on <a href="box.html#propdef-margin-top" class="noxref"><span class="propinst-margin-top">'margin-top'</span></a> or
<a href="box.html#propdef-margin-bottom" class="noxref"><span class="propinst-margin-bottom">'margin-bottom'</span></a> with '0'.

<li>If at this point both <a href="box.html#propdef-margin-top" class="noxref"><span
class="propinst-margin-top">'margin-top'</span></a> and <a href="box.html#propdef-margin-bottom" class="noxref"><span
class="propinst-margin-bottom">'margin-bottom'</span></a> are still
'auto', solve the equation under the extra constraint that the two
margins must get equal values.

<li>If at this point there is only one 'auto' left, solve the equation 
for that value.

<li>If at this point the values are over-constrained, ignore the value
for <a href="visuren.html#propdef-bottom" class="noxref"><span class="propinst-bottom">'bottom'</span></a> and solve for that
value.
</ol>


<H3><a name="q19">10.6.5 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:

<ol>
<li>If <a href="visudet.html#propdef-height" class="noxref"><span class="propinst-height">'height'</span></a> is 'auto',
substitute the element's <a href="conform.html#intrinsic">intrinsic</a>
height.

<li>If <a href="visuren.html#propdef-top" class="noxref"><span class="propinst-top">'top'</span></a> has the value 'auto',
replace it with 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 <a href="visuren.html#propdef-position" class="noxref"><span
class="propinst-position">'position'</span></a> property had been
'static'. (But rather than actually computing that box, user agents are free
to make a guess at its probable position.) The value is negative if
the hypothetical box is above the containing block.

<li>If <a href="visuren.html#propdef-bottom" class="noxref"><span class="propinst-bottom">'bottom'</span></a> is 'auto',
replace any 'auto' on <a href="box.html#propdef-margin-top" class="noxref"><span
class="propinst-margin-top">'margin-top'</span></a> or <a href="box.html#propdef-margin-bottom" class="noxref"><span
class="propinst-margin-bottom">'margin-bottom'</span></a> with '0'.

<li>If at this point both <a href="box.html#propdef-margin-top" class="noxref"><span
class="propinst-margin-top">'margin-top'</span></a> and <a href="box.html#propdef-margin-bottom" class="noxref"><span
class="propinst-margin-bottom">'margin-bottom'</span></a> are still
'auto', solve the equation under the extra constraint that the two
margins must get equal values.

<li>If at this point there is only one 'auto' left, solve the equation 
for that value.

<li>If at this point the values are over-constrained, ignore the value
for <a href="visuren.html#propdef-bottom" class="noxref"><span class="propinst-bottom">'bottom'</span></a> and solve for that
value.
</ol>

<H2>10.7 <a name="min-max-heights">Minimum and maximum heights</a>: <a href="visudet.html#propdef-min-height" class="noxref"><span
class="propinst-min-height">'min-height'</span></a> and <a href="visudet.html#propdef-max-height" class="noxref"><span
class="propinst-max-height">'max-height'</span></a></h2>

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

<div class="propdef">
<dl><dt>
<span class="index-def" title="'min-height'"><a name="propdef-min-height" class="propdef-title"><strong>'min-height'</strong></a></span>
<dd>
<table class="propinfo" cellspacing=0 cellpadding=0>
<tr valign=baseline><td><em>Value:</em>&nbsp;&nbsp;<td><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>0
<tr valign=baseline><td><em>Applies to:</em>&nbsp;&nbsp;<td>all elements except non-replaced inline elements and table elements
<tr valign=baseline><td><em>Inherited:</em>&nbsp;&nbsp;<td>no
<tr valign=baseline><td><em>Percentages:</em>&nbsp;&nbsp;<td>refer to height of containing block
<tr valign=baseline><td><em>Media:</em>&nbsp;&nbsp;<td><a href="media.html#visual-media-group" class="noxref">visual</a>
</table>
</dl>
</div>

<div class="propdef">
<dl><dt>
<span class="index-def" title="'max-height'"><a name="propdef-max-height" class="propdef-title"><strong>'max-height'</strong></a></span>
<dd>
<table class="propinfo" cellspacing=0 cellpadding=0>
<tr valign=baseline><td><em>Value:</em>&nbsp;&nbsp;<td><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> | none | <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>none
<tr valign=baseline><td><em>Applies to:</em>&nbsp;&nbsp;<td>all elements except non-replaced inline elements and table elements
<tr valign=baseline><td><em>Inherited:</em>&nbsp;&nbsp;<td>no
<tr valign=baseline><td><em>Percentages:</em>&nbsp;&nbsp;<td>refer to height of containing block
<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>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;"><a name="x13" href="syndata.html#value-def-length" class="noxref"><span class="value-inst-length"><strong>&lt;length&gt;</strong></span></a></span>
<dd>Specifies a fixed minimum or maximum computed height.
<dt><span class="index-inst" title="&lt;percentage&gt;"><a name="x14" href="syndata.html#value-def-percentage" class="noxref"><span class="value-inst-percentage"><strong>&lt;percentage&gt;</strong></span></a></span>
<dd>Specifies a percentage for determining the computed 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), the
percentage value is interpreted like 'auto'.
<dt><strong>none</strong>
<dd>(Only on <a href="visudet.html#propdef-max-height" class="noxref"><span class="propinst-max-height">'max-height'</span></a>) No limit on the height of the box. 
</dl>

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

<OL>

<LI>The height is computed (without <a href="visudet.html#propdef-min-height" class="noxref"><span
class="propinst-min-height">'min-height'</span></a> and <a href="visudet.html#propdef-max-height" class="noxref"><span
class="propinst-max-height">'max-height'</span></a>) following the rules
under <a href="#Computing_heights_and_margins">"Computing heights and
margins"</a> above.

<LI>If the computed value of <a href="visudet.html#propdef-min-height" class="noxref"><span
class="propinst-min-height">'min-height'</span></a> is greater than the
value of <a href="visudet.html#propdef-max-height" class="noxref"><span class="propinst-max-height">'max-height'</span></a>, <a href="visudet.html#propdef-max-height" class="noxref"><span
class="propinst-max-height">'max-height'</span></a> is set to the value of
<a href="visudet.html#propdef-min-height" class="noxref"><span class="propinst-min-height">'min-height'</span></a>.

<LI>If the computed height is greater than <a href="visudet.html#propdef-max-height" class="noxref"><span
class="propinst-max-height">'max-height'</span></a>, the rules <a
href="#Computing_heights_and_margins">above</a> are applied again, but
this time using the value of <a href="visudet.html#propdef-max-height" class="noxref"><span class="propinst-max-height">'max-height'</span></a> as the specified value for
<a href="visudet.html#propdef-height" class="noxref"><span class="propinst-height">'height'</span></a>.

<LI>If the computed height is smaller than <a href="visudet.html#propdef-min-height" class="noxref"><span
class="propinst-min-height">'min-height'</span></a>, the rules <a
href="#Computing_heights_and_margins">above</a> are applied again, but
this time using the value of <a href="visudet.html#propdef-min-height" class="noxref"><span class="propinst-min-height">'min-height'</span></a> as the specified value for
<a href="visudet.html#propdef-height" class="noxref"><span class="propinst-height">'height'</span></a>.

</OL>


<H2>10.8 <a name="line-height">Line height calculations</a>: the <a href="visudet.html#propdef-line-height" class="noxref"><span
class="propinst-line-height">'line-height'</span></a> and <a href="visudet.html#propdef-vertical-align" class="noxref"><span
class="propinst-vertical-align">'vertical-align'</span></a>
properties</H2>

<P>As described in the section on <a