visudet.html

CSS lets learn this step by step...

'auto' with 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 <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 to the left of the
containing block.

<li>If <a href="visuren.html#propdef-right" class="noxref"><span class="propinst-right">'right'</span></a> has the
value 'auto' while
<a href="visuren.html#propdef-direction" class="noxref"><span class="propinst-direction">'direction'</span></a> is 'rtl',
replace 'auto' with 
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>If <a href="visuren.html#propdef-left" class="noxref"><span class="propinst-left">'left'</span></a> or <a href="visuren.html#propdef-right" class="noxref"><span
class="propinst-right">'right'</span></a> are 'auto', replace any 'auto'
on <a href="box.html#propdef-margin-left" class="noxref"><span class="propinst-margin-left">'margin-left'</span></a> or <a href="box.html#propdef-margin-right" class="noxref"><span
class="propinst-margin-right">'margin-right'</span></a> with '0'.

<li>If at this point both <a href="box.html#propdef-margin-left" class="noxref"><span
class="propinst-margin-left">'margin-left'</span></a> and <a href="box.html#propdef-margin-right" class="noxref"><span
class="propinst-margin-right">'margin-right'</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 either <a href="visuren.html#propdef-left" class="noxref"><span class="propinst-left">'left'</span></a> (in case <a href="visuren.html#propdef-direction" class="noxref"><span
class="propinst-direction">'direction'</span></a> is 'rtl') or <a href="visuren.html#propdef-right" class="noxref"><span
class="propinst-right">'right'</span></a> (in case <a href="visuren.html#propdef-direction" class="noxref"><span
class="propinst-direction">'direction'</span></a> is 'ltr') and solve for
that value.
</ol>


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

<div class="propdef">
<dl><dt>
<span class="index-def" title="'min-width'"><a name="propdef-min-width" class="propdef-title"><strong>'min-width'</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>UA dependent
<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
width 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-width'"><a name="propdef-max-width" class="propdef-title"><strong>'max-width'</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
width 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 widths to a
certain range. Values have the following meanings:</p>

<dl>
<dt><span class="index-inst" title="&lt;length&gt;"><a name="x6" 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 width.
<dt><span class="index-inst" title="&lt;percentage&gt;"><a name="x7" 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 width of the
generated box's 
<a href="visuren.html#containing-block">containing block</a>.

<dt><strong>none</strong>

<dd>(Only on <a href="visudet.html#propdef-max-width" class="noxref"><span class="propinst-max-width">'max-width'</span></a>) No
limit on the width 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-width" class="noxref"><span class="propinst-width">'width'</span></a> property:</p>

<OL>

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

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

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

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

</OL>

<P>The user agent may define a non-negative minimum value for the
<a href="visudet.html#propdef-min-width" class="noxref"><span class="propinst-min-width">'min-width'</span></a> property, which
may vary from element to element and even depend on other
properties. If <a href="visudet.html#propdef-min-width" class="noxref"><span class="propinst-min-width">'min-width'</span></a>
goes below this limit, either because it was set explicitly, or
because it was 'auto' and the rules below would make it too small, the
user agent may use the minimum value as the computed value.


<h2>10.5 <a name="the-height-property">Content height</a>: the <a href="visudet.html#propdef-height" class="noxref"><span
class="propinst-height">'height'</span></a> property</H2>

<div class="propdef">
<dl><dt>
<span class="index-def" title="'height'"><a name="propdef-height" class="propdef-title"><strong>'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> | auto | <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>auto
<tr valign=baseline><td><em>Applies to:</em>&nbsp;&nbsp;<td>all elements but
non-replaced inline elements, table columns, and column groups
<tr valign=baseline><td><em>Inherited:</em>&nbsp;&nbsp;<td>no
<tr valign=baseline><td><em>Percentages:</em>&nbsp;&nbsp;<td>see prose
<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 specifies the <a
href="box.html#content-height">content height</a> of boxes generated
by block-level and <a href="conform.html#replaced-element">replaced</a> elements.

<P>This property does not apply to non-replaced <a
href="visuren.html#inline-level">inline-level</a> elements.  The
height of a non-replaced inline element's boxes is given by the element's
(possibly inherited) <a href="visudet.html#propdef-line-height" class="noxref"><span
class="propinst-line-height">'line-height'</span></a> value.



<P>Values have the following meanings:</P>

<dl>
<dt><span class="index-inst" title="&lt;length&gt;"><a name="x9" 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 height.
<dt><span class="index-inst" title="&lt;percentage&gt;"><a name="x10" 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 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), the
value is interpreted like 'auto'.
<dt><strong>auto</strong>
<dd>The height depends on the values of other properties. 
See the prose below.
</dl>

<P>Negative values for <a href="visudet.html#propdef-height" class="noxref"><span class="propinst-height">'height'</span></a>
are illegal.

<div class="example"><P style="display:none">Example(s):</P><P>
For example, the following rule fixes the height of paragraphs
to 100 pixels:</p>

<PRE>
P { height: 100px }
</PRE>

<P>Paragraphs that require more than 100 pixels of height will
<a href="visufx.html#overflow">overflow</a> according
to the <a href="visufx.html#propdef-overflow" class="noxref"><span class="propinst-overflow">'overflow'</span></a> property.
</div>

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

<p>For computing the values of <a href="visuren.html#propdef-top" class="noxref"><span class="propinst-top">'top'</span></a>, <a href="box.html#propdef-margin-top" class="noxref"><span class="propinst-margin-top">'margin-top'</span></a>, <a href="visudet.html#propdef-height" class="noxref"><span class="propinst-height">'height'</span></a>,
<a href="box.html#propdef-margin-bottom" class="noxref"><span class="propinst-margin-bottom">'margin-bottom'</span></a>, and <a href="visuren.html#propdef-bottom" class="noxref"><span class="propinst-bottom">'bottom'</span></a> a distinction must be made between
various kinds of boxes:

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