WD-css3-box-20070809 186 KB

Raw Blame History Permalink

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>
 <head profile="http://www.w3.org/2006/03/hcard
  http://microformats.org/wiki/rel-license">
  <title>CSS basic box model</title>

  <style type="text/css">
  ol.stack p {margin-top: 0}
</style>
  <link href=default.css rel=stylesheet title=Default type="text/css">
  <link href="http://www.w3.org/StyleSheets/TR/W3C-WD.css" rel=stylesheet
  title=Default type="text/css">

 <body>
  <div class=head> <!--begin-logo-->
   <p><a href="http://www.w3.org/"><img alt=W3C height=48
    src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo--></p>

   <h1 id=css-basic>CSS basic box model</h1>

   <h2 class="no-num no-toc" id=w3c-working>W3C Working Draft 9 August 2007</h2>

   <dl>
    <dt>This version:

    <dd><a href="http://www.w3.org/TR/2007/WD-css3-box-20070809">
     http://www.w3.org/TR/2007/WD-css3-box-20070809</a>

    <dt>Latest version:

    <dd><a href="http://www.w3.org/TR/css3-box">
     http://www.w3.org/TR/css3-box</a>

    <dt>Previous version:

    <dd><a href="http://www.w3.org/TR/2002/WD-css3-box-20021024">
     http://www.w3.org/TR/2002/WD-css3-box-20021024</a>

    <dt>Editors:

    <dd class=vcard><span class=fn>Bert Bos</span> (<span
     class=org>W3C</span>) <span class=email>bert@w3.org</span>
   </dl>
   <!--begin-copyright-->
   <p class=copyright><a
    href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a>
    &copy; 2007 <a href="http://www.w3.org/"><acronym title="World Wide Web
    Consortium">W3C</acronym></a><sup>&reg;</sup> (<a
    href="http://www.csail.mit.edu/"><acronym title="Massachusetts Institute
    of Technology">MIT</acronym></a>, <a
    href="http://www.ercim.org/"><acronym title="European Research Consortium
    for Informatics and Mathematics">ERCIM</acronym></a>, <a
    href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a
    href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
    <a
    href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
    and <a
    href="http://www.w3.org/Consortium/Legal/copyright-documents">document
    use</a> rules apply.</p>
   <!--end-copyright-->
   <hr title="Separator for header">
  </div>

  <h2 class="no-num no-toc" id=abstract>Abstract</h2>

  <p>CSS (Cascading Style Sheets) describes the rendering of documents on
   various media. When textual documents (e.g., HTML) are laid out on visual
   media (e.g., screen or print), CSS models the document as a hierarchy of
   boxes containing words, lines, paragraphs, tables, etc. each with
   properties such as size, color and font.

  <p>This module describes the basic types of boxes, with their padding and
   margin, and the normal “flow” (i.e., the sequence of blocks of text
   with margins in-between). It also defines “floating” boxes, but other
   kinds of layout, such as tables, absolute positioning, ruby annotations,
   grid layouts, columns and numbered pages, are described by other modules.
   Also, the layout of text inside each line (including the handling of
   left-to-right and right-to-left scripts) is defined elsewhere.

  <p>Boxes may contain either horizontal or vertical lines of text. Boxes of
   different orientations may be mixed in one flow. (This is a level 3
   feature.)

  <h2 class="no-toc no-num" id=status>Status of this document</h2>
  <!--begin-status-->

  <p><em>This section describes the status of this document at the time of
   its publication. Other documents may supersede this document. A list of
   current W3C publications and the latest revision of this technical report
   can be found in the <a href="http://www.w3.org/TR/">W3C technical reports
   index at http://www.w3.org/TR/.</a></em>

  <p>Publication as a Working Draft does not imply endorsement by the W3C
   Membership. This is a draft document and may be updated, replaced or
   obsoleted by other documents at any time. It is inappropriate to cite this
   document as other than work in progress.

  <p>The (<a
   href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public
   mailing list <a href="mailto:www-style@w3.org">www-style@w3.org</a> (see
   <a href="http://www.w3.org/Mail/Request">instructions</a>) is preferred
   for discussion of this specification. When sending e-mail, please put the
   text &#8220;css3-box&#8221; in the subject, preferably like this:
   &#8220;[<!---->css3-box<!---->] <em>&hellip;summary of
   comment&hellip;</em>&#8221;

  <p>This document was produced by the <a href="/Style/CSS/members">CSS
   Working Group</a> (part of the <a href="/Style/">Style Activity</a>).

  <p>This document was produced by a group operating under the <a
   href="/Consortium/Patent-Policy-20040205/">5 February 2004 W3C Patent
   Policy</a>. W3C maintains a <a href="/2004/01/pp-impl/32061/status"
   rel=disclosure>public list of any patent disclosures</a> made in
   connection with the deliverables of the group; that page also includes
   instructions for disclosing a patent. An individual who has actual
   knowledge of a patent which the individual believes contains <a
   href="/Consortium/Patent-Policy-20040205/#def-essential">Essential
   Claim(s)</a> must disclose the information in accordance with <a
   href="/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of the
   W3C Patent Policy</a>.</p>
  <!--end-status-->

  <p class=mtb>This module should eventually replace corresponding parts of
   the revised CSS level 2 specification <a href="#CSS21"
   rel=biblioentry>[CSS21]<!--{{CSS21}}--></a>. But this is an early draft
   and any differences to level 2 are most likely unintentional, unless they
   concern new features, such as vertical text or the marquee effect.
   <em>Please help us improve the next draft by pointing out such
   differences.</em>

  <h2 class="no-num no-toc" id=table0>Table of contents</h2>
  <!--begin-toc-->

  <ul class=toc>
   <li><a href="#dependencies"><span class=secno>1. </span>Dependencies on
    other modules</a>

   <li><a href="#introduction"><span class=secno>2. </span>Introduction</a>

   <li><a href="#how-to"><span class=secno>3. </span>How to read this
    specification</a>

   <li><a href="#types"><span class=secno>4. </span>Types of boxes</a>
    <ul class=toc>
     <li><a href="#the-lsquo"><span class=secno>4.1. </span>The
      &lsquo;display&rsquo; property</a>

     <li><a href="#block-level0"><span class=secno>4.2. </span>Block-level
      boxes, containing blocks, flows and anonymous boxes</a>

     <li><a href="#run-in-boxes"><span class=secno>4.3. </span>Run-in
      boxes</a>

     <li><a href="#compact-boxes"><span class=secno>4.4. </span>Compact
      boxes</a>
    </ul>

   <li><a href="#the-padding"><span class=secno>5. </span>The padding
    properties</a>

   <li><a href="#margins"><span class=secno>6. </span>Margins</a>
    <ul class=toc>
     <li><a href="#the-margin"><span class=secno>6.1. </span>The margin
      properties</a>

     <li><a href="#collapsing-margins"><span class=secno>6.2.
      </span>Collapsing margins</a>
    </ul>

   <li><a href="#the-lsquo0"><span class=secno>7. </span>The
    &lsquo;width&rsquo; and &lsquo;height&rsquo; properties</a>

   <li><a href="#min-max"><span class=secno>8. </span>The
    &lsquo;min-width&rsquo;, &lsquo;max-width&rsquo;,
    &lsquo;min-height&rsquo; and &lsquo;max-height&rsquo; properties</a>

   <li><a href="#Calculating"><span class=secno>9. </span>Calculating widths,
    heights and margins</a>
    <ul class=toc>
     <li><a href="#inline-non-replaced"><span class=secno>9.1. </span>Inline,
      non-replaced elements</a>

     <li><a href="#inline-replaced"><span class=secno>9.2. </span>Inline or
      floating, replaced elements</a>

     <li><a href="#blockwidth"><span class=secno>9.3. </span>Block-level,
      non-replaced elements in normal flow when &lsquo;overflow&rsquo;
      computes to &lsquo;<code class=css>visible</code>&rsquo;</a>

     <li><a href="#other"><span class=secno>9.4. </span>Other block-level,
      non-replaced elements in normal flow</a>

     <li><a href="#lsquo"><span class=secno>9.5.
      </span>&lsquo;Inline-block&rsquo; or floating, non-replaced
      elements</a>

     <li><a href="#abs-non-replaced-width"><span class=secno>9.6.
      </span>Absolutely positioned, non-replaced elements</a>

     <li><a href="#abs-replaced"><span class=secno>9.7. </span>Absolutely
      positioned, replaced elements</a>

     <li><a href="#block-level1"><span class=secno>9.8. </span>Block-level,
      replaced elements in normal flow</a>

     <li><a href="#floating"><span class=secno>9.9. </span>Floating,
      non-replaced elements</a>

     <li><a href="#root-height"><span class=secno>9.10. </span>&lsquo;<code
      class=css>Auto</code>&rsquo; heights for flow roots</a>

     <li><a href="#shrink-to-fit"><span class=secno>9.11.
      </span>Shrink-to-fit</a>
    </ul>

   <li><a href="#floating0"><span class=secno>10. </span>Floating boxes</a>
    <ul class=toc>
     <li><a href="#introduction0"><span class=secno>10.1. </span>Introduction
      to floats</a>

     <li><a href="#the-lsquo1"><span class=secno>10.2. </span>The
      &lsquo;float&rsquo; property</a>

     <li><a href="#rules"><span class=secno>10.3. </span>Rules for
      positioning floats</a>

     <li><a href="#the-lsquo2"><span class=secno>10.4. </span>The
      &lsquo;clear&rsquo; property</a>
    </ul>

   <li><a href="#overflow1"><span class=secno>11. </span>Overflow</a>
    <ul class=toc>
     <li><a href="#overflow"><span class=secno>11.1. </span>The
      &lsquo;overflow&rsquo;, &lsquo;overflow-x&rsquo; and
      &lsquo;overflow-y&rsquo; properties</a>

     <li><a href="#the-lsquo3"><span class=secno>11.2. </span>The
      &lsquo;overflow-style&rsquo; property</a>

     <li><a href="#marquee"><span class=secno>11.3. </span>The marquee
      properties</a>
    </ul>

   <li><a href="#the-lsquo4"><span class=secno>12. </span>The
    &lsquo;visibility&rsquo; property</a>

   <li><a href="#rotating"><span class=secno>13. </span>Rotating boxes</a>

   <li><a href="#stacking"><span class=secno>14. </span>Stacking contexts</a>


   <li><a href="#conformance"><span class=secno>15. </span>Conformance and
    profiles</a>

   <li><a href="#acknowledgments"><span class=secno>16.
    </span>Acknowledgments</a>

   <li class=no-num><a href="#references">References</a>

   <li class=no-num><a href="#index">Index</a>

   <li class=no-num><a href="#property">Property index</a>
  </ul>
  <!--end-toc-->

  <h2 id=dependencies><span class=secno>1. </span>Dependencies on other
   modules</h2>

  <p>This CSS module depends on the following other CSS modules:

  <ul>
   <li><cite>CSS Text Layout Module</cite> <a href="#CSS3TEXTLAYOUT"
    rel=biblioentry>[CSS3TEXTLAYOUT]<!--{{!CSS3TEXTLAYOUT}}--></a> &ndash;
    switch between vertical and horizontal text.

   <li><cite>CSS Syntax Module</cite> <a href="#CSS3SYN"
    rel=biblioentry>[CSS3SYN]<!--{{!CSS3SYN}}--></a> &ndash; syntax of
    properties and values

   <li><cite>CSS Values and Units Module</cite> <a href="#CSS3VAL"
    rel=biblioentry>[CSS3VAL]<!--{{!CSS3VAL}}--></a> &ndash; definitions of
    value types <dfn id=ltnumbergt><var>&lt;number&gt;</var></dfn>, <dfn
    id=ltanglegt><var>&lt;angle&gt;</var></dfn> and <dfn
    id=ltlengthgt><var>&lt;length&gt;</var></dfn>; defines the terms <dfn
    id=computed>computed value</dfn> and <dfn id=used-value.>used
    value.</dfn>

   <li><cite>CSS Text Module</cite> <a href="#CSS3TEXT"
    rel=biblioentry>[CSS3TEXT]<!--{{!CSS3TEXT}}--></a> &ndash; inline layout
    and definition of <dfn id=line-box.>line box.</dfn>

   <li><cite>CSS Generated and Replaced Content module</cite> <a
    href="#CSS3GENCON" rel=biblioentry>[CSS3GENCON]<!--{{!CSS3GENCON}}--></a>
    &ndash; defines the terms <dfn id=replaced>replaced</dfn> element and
    <dfn id=intrinsic>intrinsic</dfn> size (and intrinsic ratio).

   <li><cite>CSS Backgrounds and Borders Module</cite> <a href="#CSS3BG"
    rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a> &ndash; defines <dfn
    id=ltbg-positiongt><var>&lt;bg-position&gt;</var></dfn>
  </ul>

  <h2 id=introduction><span class=secno>2. </span>Introduction</h2>

  <p class=note>Note: The model in this specification differs from the model
   described in the CSS level 2 specification <a href="#CSS21"
   rel=biblioentry>[CSS21]<!--{{CSS21}}--></a>, because (1) it is generalized
   to apply also to vertical text and (2) it adds properties to control the
   <a href="#marquee">marquee effect,</a> (speed, direction, etc.). The
   marquee effect is allowed, but UA-dependent in level 2.

  <p>CSS assumes that the document to lay out is modeled as a tree of <dfn
   id=elements. title=element>elements.</dfn> Each element has an ordered
   list of zero or more child elements, with an optional string of text
   before the list, in-between the children and after the list. The unique
   element that has no parent is called the <dfn id=root->root element.</dfn>

  <p>CSS describes how each element and each string of text is laid out by
   transforming the document tree into a tree of rectangular boxes, whose
   size and position depends on their properties. There are <em><a
   href="#block-level">block-level</a></em> boxes, <em title="line box"><a
   href="#line-box.">line boxes</a></em> and <em title="inline-level
   box">inline-level boxes.</em> A block-level box is like a paragraph. A
   line box is like a line of text. And inline-level boxes are like words
   inside a line.

  <p class=note>The precise rules are below and in other modules, but in
   summary, a block-level box contains either other block-level boxes (e.g.,
   a section containing paragraphs, or a table containing rows), or it
   contains line boxes (e.g., a paragraph containing lines of text). A line
   box contains inline-level boxes (e.g., a line with words in different
   styles). An inline-level box may contain either text interspersed with
   more inline-level boxes, or it may contain a block-level box (e.g., a
   small table that is rendered inline).

  <div class=figure>
   <p><img alt="Schematic representation of rel" src=box-intro.png></p>

   <p class=caption>Relation between four displayed boxes in the rendered
    document (on the right) and the three corresponding elements in the
    source document on the (left).</p>
  </div>

  <p>The tree of boxes closely mirrors the tree of elements. Each element is
   transformed into zero or more boxes. If the element is not the root
   element, then each of its boxes is either a child of a box of the parent
   element, or it is a child of a box of the element itself. In other words,
   there may be more or fewer boxes than there are elements, but each box
   belongs to exactly one element.

  <div class=example>
   <p>For example, a fragment of HTML such as</p>

   <pre>&lt;ul&gt;
 &lt;li&gt;The first item in the list.
 &lt;li&gt;The second item.
&lt;/ul&gt;</pre>

   <p>may result in one block-level box for the <code>ul</code> element,
    containing two block-level boxes for the two <code>li</code> elements,
    each of which has one line box (i.e., one line of text). Both line boxes
    contain two inline-level boxes: one that contains the list bullet and one
    that contains the text.</p>

   <p>Note how the <code>li</code> is transformed into multiple boxes,
    including one that contains &ldquo;generated content,&rdquo; viz., the
    list bullet, which is not present in the source document.</p>

   <p>If the document is rendered in a narrow window, it may be that the
    <code>li</code> elements get transformed into even more boxes, because
    the text requires multiple lines. And if the document is rendered on
    paper, it may be that a page break falls in the middle of the
    <code>ul</code> element, so that it is not transformed into a single
    block-level box, but into two smaller ones, each on a different page.</p>
  </div>

  <p>Properties are set on elements and influence how the element is turned
   into boxes, but in this specification we refer interchangeably to
   &ldquo;the <var>P</var> property of an element&rdquo; and &ldquo;the
   <var>P</var> property of a box&rdquo; (both of which actually mean
   &ldquo;<em>the value</em> of property <var>P</var> of&hellip;&rdquo;),
   unless it is important to distinguish the box and the element, e.g.,
   because the element has several boxes and they don't all have the same
   value for the property.

  <div class=figure id=various>
   <p><img alt="Diagram of a typical box, showing the content, padding,
    border and margin areas" src=box.png></p>

   <p class=caption>The various areas and edges of a typical box</p>
  </div>

  <p>Boxes have padding, a border and margins (see the <a
   href="#various">figure</a>). Different properties determine the thickness
   of each of these (which may be zero).

  <p>Each box has a <dfn id=content>content area.</dfn> The rectangle that
   bounds this area is the <dfn id=content0>content edge.</dfn> Around the
   content area is the <dfn id=padding>padding area</dfn> and its outside
   bounds are called the <dfn id=padding0>padding edge.</dfn> Outside the
   padding is the <dfn id=border>border area</dfn> and the outside boundary
   of that area is the <dfn id=border0>border edge.</dfn> Finally, outside
   the border is the <dfn id=margin>margin area</dfn> and its outer edge is
   the <dfn id=margin0>margin edge.</dfn>

  <p>When the specification says that the padding or border is
   &ldquo;absent&rdquo; on some side of the box, that actually means that its
   thickness is zero.

  <p class=note>Note that the margin, unlike the border and padding, may have
   a negative thickness. That is one way to make adjacent boxes overlap each
   other.

  <p>A box is <dfn id=horizontal>horizontal</dfn> if its &lsquo;<a
   class=property href="#block-progression">block-progression</a>&rsquo;
   property is &lsquo;<code class=css>tb</code>&rsquo;, otherwise it is <dfn
   id=vertical.>vertical.</dfn>

  <h2 id=how-to><span class=secno>3. </span>How to read this specification</h2>

  <p>All sections are normative, unless stated otherwise.

  <div class=example>
   <p>Examples look like this and normally start with the word
    &ldquo;Example.&rdquo; Examples are not normative.</p>
  </div>

  <p class=note>Notes look like this and normally start with the word
   &ldquo;Note.&rdquo; Notes are not normative.

  <p class=issue>Editorial notes look like this. They will be removed before
   the document becomes Candidate Recommendation.

  <p>Each property is defined in part in the text and in part by a table that
   groups together a number of facts about the property, including a regular
   expression to restrict its syntax. See <span class=issue>[where?]</span>
   for the meaning. The &ldquo;Inherited&rdquo; and &ldquo;Initial&rdquo;
   rows in the table are used by the Cascading and Inheritance module <a
   href="#CSS3CASCADE"
   rel=biblioentry>[CSS3CASCADE]<!--{{CSS3CASCADE}}--></a> and
   &ldquo;Media&rdquo; by the Media Queries specification <a href="#MEDIAQ"
   rel=biblioentry>[MEDIAQ]<!--{{MEDIAQ}}--></a>.

  <p>The specification may refer to the <em><a href="#used-value.">used
   value</a></em> and the <em><a href="#computed">computed value</a></em> of
   a property. Unless stated explicitly, the short form “value” means the
   computed value.

  <h2 id=types><span class=secno>4. </span>Types of boxes</h2>

  <h3 id=the-lsquo><span class=secno>4.1. </span>The &lsquo;<a class=property
   href="#display">display</a>&rsquo; property</h3>

  <table class=propdef id=namedisplay>
   <tbody>
    <tr>
     <td>Name:

     <td><dfn id=display>display</dfn>

    <tr>
     <td>Value:

     <td>inline | block | inline-block | list-item | run-in | compact | table
      | inline-table | table-row-group | table-header-group |
      table-footer-group | table-row | table-column-group | table-column |
      table-cell | table-caption | ruby | ruby-base | ruby-text |
      ruby-base-group | ruby-text-group | <var><a
      href="#lttemplategt">&lt;template&gt;</a></var>| none

    <tr>
     <td>Initial:

     <td>inline

    <tr>
     <td>Applies to:

     <td>all elements

    <tr>
     <td>Inherited:

     <td>no

    <tr>
     <td>Percentages:

     <td>N/A

    <tr>
     <td>Media:

     <td>visual (&lsquo;<code class=css><a
      href="#none0">none</a></code>&rsquo; applies to all media)

    <tr>
     <td>Computed value:

     <td>specified value, except for floats, root elements and positioned
      elements; see text
  </table>

  <p>This property, in combination with &lsquo;<a class=property
   href="#float">float</a>&rsquo; and &lsquo;<a class=property
   href="#position">position</a>&rsquo;, determines the type of box or boxes
   that are generated for an element. The values are as follows:

  <dl>
   <dt><dfn id=inline>inline</dfn>

   <dd>Inline boxes.

   <dt><dfn id=block>block</dfn>

   <dd>Block boxes.

   <dt><dfn id=inline-block>inline-block</dfn>

   <dd>A block box, which itself is flowed as a single inline box, similar to
    a replaced element. The inside of an inline-block is formatted as a block
    box, and the box itself is formatted as an inline box.

   <dt><dfn id=list-item>list-item</dfn>

   <dd>One or more block boxes and one marker box. Marker boxes are defined
    in the Lists module <a href="#CSS3LIST"
    rel=biblioentry>[CSS3LIST]<!--{{CSS3LIST}}--></a>. <span class=issue>If
    the Lists module is not ready, define the position of the marker and the
    list-style property here? Or refer to CSS 2.1 instead?</span>

   <dt><dfn id=run-in>run-in</dfn>

   <dd>Either block or inline boxes, depending on context (see <a
    href="#run-in-boxes">Run-in boxes</a>). Properties apply to run-in boxes
    based on their final status (<a href="#inline-level">inline-level</a> or
    <a href="#block-level">block-level</a>).

   <dt><dfn id=compact>compact</dfn>

   <dd>Either block boxes or a marker box, depending on context (see <a
    href="#compact-boxes">Compact boxes</a>). Properties apply to compact
    boxes based on their final status.

   <dt><dfn id=table>table</dfn>, <dfn id=inline-table>inline-table</dfn>,
    <dfn id=table-row-group>table-row-group</dfn>, <dfn
    id=table-header-group>table-header-group</dfn>, <dfn
    id=table-footer-group>table-footer-group</dfn>, <dfn
    id=table-row>table-row</dfn>, <dfn
    id=table-column-group>table-column-group</dfn>, <dfn
    id=table-column>table-column</dfn>, <dfn id=table-cell>table-cell</dfn>,
    <dfn id=table-caption>table-caption</dfn>

   <dd>See the Tables module <a href="#CSS3TBL"
    rel=biblioentry>[CSS3TBL]<!--{{CSS3TBL}}--></a>.

   <dt><dfn id=ruby>ruby</dfn>, <dfn id=ruby-base>ruby-base</dfn>, <dfn
    id=ruby-text>ruby-text</dfn>, <dfn
    id=ruby-base-group>ruby-base-group</dfn>, <dfn
    id=ruby-text-group>ruby-text-group</dfn>

   <dd>See the Ruby module <a href="#CSS3RUBY"
    rel=biblioentry>[CSS3RUBY]<!--{{CSS3RUBY}}--></a>.

   <dt><dfn id=lttemplategt><var>&lt;template&gt;</var></dfn>

   <dd>See the Advanced Layout module <a href="#CSS3LAYOUT"
    rel=biblioentry>[CSS3LAYOUT]<!--{{CSS3LAYOUT}}--></a>.

   <dt><dfn id=none>none</dfn>

   <dd>This value causes an element to generate no boxes (i.e., the element
    has no effect on layout). Descendant elements do not generate any boxes
    either; this behavior cannot be overridden by setting the &lsquo;<a
    class=property href="#display">display</a>&rsquo; property on the
    descendants.
  </dl>

  <p class=note>Note that &lsquo;<code class=css><a
   href="#none0">none</a></code>&rsquo; does not create an invisible box; it
   creates no box at all. See &lsquo;<a class=property
   href="#visibility">visibility</a>&rsquo; for a mechanisms that enables an
   element to generate boxes that affect formatting but are not visible
   themselves.

  <p>The computed value is the same as the specified value, except when
   &lsquo;<a class=property href="#float">float</a>&rsquo; is not
   &lsquo;<code class=css><a href="#none0">none</a></code>&rsquo; or when the
   element is the <em><a href="#root-">root element.</a></em> In those cases,
   the computed value is as follows:

  <table class=equiv-table>
   <thead>
    <tr>
     <th>Specified value

     <th>Computed value

   <tbody>
    <tr>
     <td>inline-table

     <td>table

    <tr>
     <td>inline, run-in, table-row-group, table-column, table-column-group,
      table-header-group, table-footer-group, table-row, table-cell,
      table-caption, inline-block

     <td>block

    <tr>
     <td>others

     <td>same as specified
  </table>

  <p>The value of &lsquo;<a class=property
   href="#position">position</a>&rsquo; may also influence the computed
   value. See <a href="#CSS3TBL"
   rel=biblioentry>[CSS3TBL]<!--{{CSS3TBL}}--></a>.

  <div class=issue>In fact, the complete rules are:
   <ol>
    <li>If &lsquo;<a class=property href="#display">display</a>&rsquo; is
     &lsquo;<code class=css><a href="#none0">none</a></code>&rsquo;, then
     &lsquo;<a class=property href="#float">float</a>&rsquo; and &lsquo;<a
     class=property href="#position">position</a>&rsquo; do not apply.

    <li>Otherwise, if &lsquo;<a class=property
     href="#position">position</a>&rsquo; is neither &lsquo;<code
     class=css>static</code>&rsquo; nor &lsquo;<code
     class=css>relative</code>&rsquo;, then &lsquo;<a class=property
     href="#display">display</a>&rsquo; is set according to the table above.
     (And float does not apply.)

    <li>Otherwise, if float is not &lsquo;<code class=css><a
     href="#none0">none</a></code>&rsquo;, then &lsquo;<a class=property
     href="#display">display</a>&rsquo; is set according to the table above.

    <li>Otherwise, if the element is the root element, then &lsquo;<a
     class=property href="#display">display</a>&rsquo; is set according to
     the table above.

    <li>Otherwise, the computed value of &lsquo;<a class=property
     href="#display">display</a>&rsquo; is the same as the specified value.
   </ol>
  </div>

  <h3 id=block-level0><span class=secno>4.2. </span>Block-level boxes,
   containing blocks, flows and anonymous boxes</h3>

  <p>A <dfn id=block-level>block-level</dfn> box is a box that has a <a
   href="#used-value.">used value</a> for &lsquo;<a class=property
   href="#display">display</a>&rsquo; of &lsquo;<code class=css><a
   href="#block">block</a></code>&rsquo;, &lsquo;<code class=css><a
   href="#list-item">list-item</a></code>&rsquo;, &lsquo;<code class=css><a
   href="#table">table</a></code>&rsquo;, &lsquo;<code
   class=css>table-*</code>&rsquo; (i.e., all table boxes) or <var><a
   href="#lttemplategt">&lt;template&gt;</a></var>. A block-level element is
   an element all of whose top-level non-anonymous boxes are block-level.

  <p>An <dfn id=inline-level>inline-level</dfn> box is a box that has a <a
   href="#used-value.">used value</a> for &lsquo;<a class=property
   href="#display">display</a>&rsquo; of &lsquo;<code class=css><a
   href="#inline">inline</a></code>&rsquo;, &lsquo;<code class=css><a
   href="#inline-block">inline-block</a></code>&rsquo;, &lsquo;<code
   class=css><a href="#inline-table">inline-table</a></code>&rsquo; or
   &lsquo;<code class=css><a href="#ruby">ruby</a></code>&rsquo;. <span
   class=issue>[What about the other ruby values?]</span>

  <p>An <dfn id=anonymous>anonymous box,</dfn> informally, is a box that
   cannot be addressed with CSS selectors. All its properties, except for
   &lsquo;<a class=property href="#display">display</a>&rsquo;, have their
   default values (either the initial value or inherited). Anonymous boxes
   are created when the CSS box model requires a child box with a certain
   value for &lsquo;<a class=property href="#display">display</a>&rsquo;, but
   the child actually has a different value. In that case an anonymous box of
   the right kind is created and wraps the child (or children). Other modules
   (e.g., <a href="#CSS3TBL" rel=biblioentry>[CSS3TBL]<!--{{CSS3TBL}}--></a>,
   <a href="#CSS3TEXT" rel=biblioentry>[CSS3TEXT]<!--{{!CSS3TEXT}}--></a>)
   may also define anonymous boxes. The anonymous boxes defined by this
   module are the following:

  <ul><!--
  <li>An ''inline-table'' element creates one box with ''inline-table'' as
    the value for 'display', which contains one anonymous box with ''table''
    as the value.
  <li>An ''inline-block'' element creates one box with ''inline-block'' as
    the value for 'display', containing one anonymous box with ''block'' as
    the value.
  <li>A <span>block-level</span> element that has a
    'block-progression' of ''lr'' or
    ''rl'' and a parent with a 'block-progression' of ''tb'' (or vice-versa)
    generates one or more block-level boxes with the same 'block-progression'
    as the parent, each of which has one anonymous child box with a 'display'
    of ''block'' and the 'block-progression' of the element itself. <span
    class=issue>[Coordinate this with CSS3TEXTLAYOUT]</span>
  -->

   <li>A <span>block-level box</span> may contain either <a href="#line-box."
    title="line box">line boxes</a> or <a href="#block-level">block-level</a>
    boxes, but not both. If necessary, any line boxes that belong to this
    box's element are wrapped in one or more (as few as possible) anonymous
    boxes with a &lsquo;<a class=property href="#display">display</a>&rsquo;
    of &lsquo;<code class=css><a href="#block">block</a></code>&rsquo;.
  </ul>

  <div class=example>
   <p>An example of the last point above is this document fragment:</p>

   <pre>&lt;p&gt;Somebody whose name I have
forgotten, said, long ago: &lt;q&gt;a box is
a box,&lt;/q&gt; and he probably meant it.&lt;/p&gt;</pre>

   <p>with these style rules:</p>

   <pre>p { display: block }
q { display: block; margin: 1em }</pre>

   <p>The <code>p</code> element has both line boxes and a child box for the
    <code>q</code> element, which is a block-level element. The line boxes
    before the <code>q</code> are wrapped in an anonymous block-level box and
    so are the line boxes after the <code>q</code>. The resulting tree of
    boxes might be as follows (refer to the <a href="#When">figure</a>):</p>

   <ul>
    <li>block-level box [p]
     <ul>
      <li>block-level box [anonymous]
       <ul>
        <li>line box: &ldquo;Somebody&hellip;&rdquo;

        <li>line box: &ldquo;forgotten&hellip;&rdquo;
       </ul>

      <li>block-level box [q]
       <ul>
        <li>line box: &ldquo;a box&hellip;&rdquo;
       </ul>

      <li>block-level box [anonymous]
       <ul>
        <li>line box: &ldquo;and he&hellip;&rdquo;
       </ul>
     </ul>
   </ul>

   <div class=figure id=When>
    <p><img alt="The P element has two line boxes before the q and one after.
     The first two are wrapped in an anonymous box, the last one is wrapped
     in another anonymous box." src=anonymous.png></p>

    <p class=caption>When the fragment is rendered, the text before the q is
     wrapped in an anonymous block and the text after the q in another.</p>
   </div>
  </div>
  <!--example-->

  <p class=note>Note that the anonymous boxes defined in this module are all
   <a href="#block-level">block-level,</a> but anonymous boxes defined in
   other modules may be different.

  <p class=mtb>The <dfn id=containing>containing block</dfn> of a box is a
   rectangle that is associated with the box and that is used in various
   definitions in this specification. Apart from a size and a position, the
   rectangle also has &lsquo;<a class=property
   href="#direction">direction</a>&rsquo; and &lsquo;<a class=property
   href="#block-progression">block-progression</a>&rsquo; properties. The
   containing block of a box is defined as follows:

  <ul>
   <li>The containing block of the <a href="#root-" title="root element">root
    element's</a> top-level boxes is a rectangle with the dimensions of the
    <em><a href="#viewport">viewport,</a></em> anchored at the <em
    title=canvas><a href="#canvas">canvas's</a></em> origin for continuous
    media and the page area for paged media. (See <a href="#MEDIAQ"
    rel=biblioentry>[MEDIAQ]<!--{{MEDIAQ}}--></a> and <a href="#CSS3PAGE"
    rel=biblioentry>[CSS3PAGE]<!--{{CSS3PAGE}}--></a> for definitions of
    continuous and paged media.) This containing block is called the <dfn
    id=initial>initial containing block.</dfn> The &lsquo;<a class=property
    href="#direction">direction</a>&rsquo; and &lsquo;<a class=property
    href="#block-progression">block-progression</a>&rsquo; of the initial
    containing block are the same as those of the root element.

   <li>The containing block of other boxes is the rectangle formed by the
    <em><a href="#content0">content edge</a></em> of their nearest ancestor
    box that is <a href="#block-level">block-level.</a> This may be an
    anonymous box. The &lsquo;<a class=property
    href="#direction">direction</a>&rsquo; and &lsquo;<a class=property
    href="#block-progression">block-progression</a>&rsquo; of the containing
    block are those of the box whose content edge it is.
  </ul>

  <p class=note>Note that the above is modified by the Absolute Positioning
   module <a href="#CSS3POS" rel=biblioentry>[CSS3POS]<!--{{CSS3POS}}--></a>:
   in particular, if a box's &lsquo;<a class=property
   href="#position">position</a>&rsquo; property is neither &lsquo;<code
   class=css>static</code>&rsquo; nor &lsquo;<code
   class=css>relative</code>&rsquo;, its containing block is established
   differently.

  <p class=mtb>A <dfn id=flow-root>flow root</dfn> is a box that satisfies at
   least one of the following:

  <ul>
   <li>The value of &lsquo;<a class=property href="#float">float</a>&rsquo;
    is not &lsquo;<code class=css><a href="#none0">none</a></code>&rsquo;.

   <li>The <em><a href="#used-value.">used value</a></em> of &lsquo;<a
    class=property href="#overflow0">overflow</a>&rsquo; is not &lsquo;<code
    class=css><a href="#visible0">visible</a></code>&rsquo;.

   <li>The value of &lsquo;<a class=property
    href="#display">display</a>&rsquo; is &lsquo;<code class=css><a
    href="#table-cell">table-cell</a></code>&rsquo;, &lsquo;<code
    class=css><a href="#table-caption">table-caption</a></code>&rsquo; (see
    <a href="#CSS3TBL" rel=biblioentry>[CSS3TBL]<!--{{CSS3TBL}}--></a>),
    &lsquo;<code class=css><a
    href="#inline-block">inline-block</a></code>&rsquo; or &lsquo;<code
    class=css><a href="#inline-table">inline-table</a></code>&rsquo;.

   <li>The value of &lsquo;<a class=property
    href="#position">position</a>&rsquo; is neither &lsquo;<code
    class=css>static</code>&rsquo; nor &lsquo;<code
    class=css>relative</code>&rsquo; (see <a href="#CSS3POS"
    rel=biblioentry>[CSS3POS]<!--{{CSS3POS}}--></a>).

   <li>The value of &lsquo;<a class=property
    href="#block-progression">block-progression</a>&rsquo; is &lsquo;<code
    class=css>lr</code>&rsquo; or &lsquo;<code class=css>rl</code>&rsquo; and
    the value of &lsquo;<a class=property
    href="#block-progression">block-progression</a>&rsquo; of its parent box
    is &lsquo;<code class=css>tb</code>&rsquo;

   <li>The value of &lsquo;<a class=property
    href="#block-progression">block-progression</a>&rsquo; is &lsquo;<code
    class=css>tb</code>&rsquo; and the value of &lsquo;<a class=property
    href="#block-progression">block-progression</a>&rsquo; of its parent box
    is &lsquo;<code class=css>lr</code>&rsquo; or &lsquo;<code
    class=css>rl</code>&rsquo;.
  </ul>

  <p class=note>Note that an element with &lsquo;<code class=css>display:
   inline</code>&rsquo; therefore cannot be a flow root: it doesn't float
   (otherwise its &lsquo;<a class=property href="#display">display</a>&rsquo;
   would be &lsquo;<code class=css><a href="#block">block</a></code>&rsquo;),
   and neither &lsquo;<a class=property href="#overflow0">overflow</a>&rsquo;
   nor &lsquo;<a class=property
   href="#block-progression">block-progression</a>&rsquo; apply to inlines.

  <p class=note>The terminology in the CSS level 2 specification is
   different. A flow root is called “an element that establishes a new
   formatting context.”

  <p>Other modules may define additional flow roots. <span class=issue>[Can
   we thus remove &lsquo;<code class=css><a
   href="#table-caption">table-caption</a></code>&rsquo;, &lsquo;<code
   class=css><a href="#table-cell">table-cell</a></code>&rsquo;, and
   &lsquo;<a class=property href="#position">position</a>&rsquo; from the
   list above?]</span>

  <p>The <dfn id=flow>flow</dfn> (a.k.a. <dfn id=normal>normal flow</dfn>) of
   a given <em><a href="#flow-root">flow root</a></em> is a set of boxes. A
   box belongs to the flow if:

  <ol>
   <li>The used value of its &lsquo;<a class=property
    href="#display">display</a>&rsquo; is &lsquo;<code class=css><a
    href="#block">block</a></code>&rsquo;, &lsquo;<code class=css><a
    href="#list-item">list-item</a></code>&rsquo;, &lsquo;<code class=css><a
    href="#table">table</a></code>&rsquo; or <var><a
    href="#lttemplategt">&lt;template&gt;</a></var>.

   <li>The used value of its &lsquo;<a class=property
    href="#float">float</a>&rsquo; is &lsquo;<code class=css><a
    href="#none0">none</a></code>&rsquo;.

   <li>The used value of its &lsquo;<a class=property
    href="#position">position</a>&rsquo; is &lsquo;<code
    class=css>static</code>&rsquo; or &lsquo;<code
    class=css>relative</code>&rsquo;.

   <li>It is either a child of the flow root or a child of a box that belong
    to the flow.
  </ol>

  <div class=example>
   <p>For example, the fragment</p>

   <pre>&lt;div class=sidebar&gt;
 &lt;p&gt;Text in a sidebar.
 &lt;p&gt;Here is quote:
 &lt;blockquote lang=ja&gt;
  &lt;p&gt;...
 &lt;/blockquote&gt;
 &lt;p&gt;Etc. etc.
&lt;/div&gt; </pre>

   <p>with the style</p>

   <pre>div.sidebar { block-progression: tb; float: left }
blockquote[lang|=ja] { block-progression: rl; height: 10em }</pre>

   <p>defines two flows:</p>

   <ol>
    <li>The <code>div</code> is a flow root, because it floats. Its flow
     consist of the 1st, 2nd and 4th <code>p</code> and the
     <code>blockquote</code>.

    <li>The <code>blockquote</code> is vertical, while its parent is
     horizontal and it is thus a flow root. Its flow is formed by the 3rd
     <code>p</code>.
   </ol>

   <p>(The <code>div</code> itself belongs to a third flow, but its flow root
    is not shown in the fragment.)</p>
  </div>

  <p class=note>Note that a flow root is not necessarily block-level, it may
   be an &lsquo;<code class=css><a
   href="#inline-block">inline-block</a></code>&rsquo;, e.g.

  <p>The boxes of a flow are laid out inside their flow root one after the
   other in the direction of the &lsquo;<a class=property
   href="#block-progression">block-progression</a>&rsquo; property of the
   flow root and in the same order as in the source document. Their position
   is given by how much their margins overlap (see <a
   href="#collapsing-margins">“Collapsing margins”</a>) and by the fact
   that their side margin edges coincide with content edges of their
   containing blocks. More precisely: Each box's left and right margin edges
   coincide with the left and right content edges of its containing block (if
   the flow root is &lsquo;<code class=css>tb</code>&rsquo;), or its top and
   bottom margin edges coincide with the top and bottom content edges of its
   containing block (if the flow root is &lsquo;<code
   class=css>rl</code>&rsquo; or &lsquo;<code class=css>lr</code>&rsquo;).

  <p class=issue>[Define <dfn id=viewport>viewport</dfn> and <dfn
   id=canvas>canvas</dfn>]

  <h3 id=run-in-boxes><span class=secno>4.3. </span>Run-in boxes</h3>

  <p>A run-in box behaves as follows:

  <ol>
   <li> If the run-in box contains a block box, the run-in box becomes a
    block box.

   <li>If a sibling block box (that does not float and is not absolutely
    positioned) follows the run-in box, the run-in box becomes the first
    inline box of the block box. A run-in cannot run in to a block that
    already starts with a run-in or that itself is a run-in.

   <li>Otherwise, the run-in box becomes a block box.
  </ol>

  <div class=example>
   <p>A &lsquo;<code class=css><a href="#run-in">run-in</a></code>&rsquo; box
    is useful for run-in headers, as in this example:</p>

   <pre>
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
&lt;HTML>
  &lt;HEAD>
    &lt;TITLE>A run-in box example&lt;/TITLE>
    &lt;STYLE type="text/css">
      H3 { display: run-in }
    &lt;/STYLE>
  &lt;/HEAD>
  &lt;BODY>
    &lt;H3>A run-in heading.&lt;/H3>
    &lt;P>And a paragraph of text that
       follows it.
  &lt;/BODY>
&lt;/HTML>
</pre>

   <p>This example might be formatted as:</p>

   <pre>
<b>A run-in heading.</b> And a
paragraph of text that
follows it.
</pre>
  </div>

  <p>Despite appearing visually as part of the following block box, a run-in
   element still inherits properties from its parent in the source tree.
   Please consult the section on generated content for information about how
   run-in boxes interact with generated content. <span
   class=issue>[where?]</span>

  <h3 id=compact-boxes><span class=secno>4.4. </span>Compact boxes</h3>

  <p class=issue>Define here or in extended box module?

  <h2 id=the-padding><span class=secno>5. </span>The padding properties</h2>

  <table class=propdef id=namepadding>
   <tbody>
    <tr>
     <td>Name:

     <td><dfn id=padding1>padding</dfn>

    <tr>
     <td>Value:

     <td>[ <var><a href="#ltlengthgt">&lt;length&gt;</a></var> |
      <var>&lt;percentage&gt;</var> ]{1,4}

    <tr>
     <td>Initial:

     <td>(see individual properties)

    <tr>
     <td>Applies to:

     <td>all elements

    <tr>
     <td>Inherited:

     <td>no

    <tr>
     <td>Percentages:

     <td>width* of containing block

    <tr>
     <td>Media:

     <td>visual

    <tr>
     <td>Computed value:

     <td>see individual properties

    <tr>
     <td class=footnote colspan=2>*) if the <em><a
      href="#containing">containing block</a></em> is <em><a
      href="#horizontal">horizontal,</a></em> otherwise the height
  </table>

  <table class=propdef id=namepadding-top>
   <tbody>
    <tr>
     <td>Name:

     <td><dfn id=padding-top>padding-top</dfn> , <dfn
      id=padding-right>padding-right</dfn>, <dfn
      id=padding-bottom>padding-bottom</dfn>, <dfn
      id=padding-left>padding-left</dfn>

    <tr>
     <td>Value:

     <td>[ <var><a href="#ltlengthgt">&lt;length&gt;</a></var> |
      <var>&lt;percentage&gt;</var> ]

    <tr>
     <td>Initial:

     <td>0

    <tr>
     <td>Applies to:

     <td>all elements

    <tr>
     <td>Inherited:

     <td>no

    <tr>
     <td>Percentages:

     <td>width* of containing block

    <tr>
     <td>Media:

     <td>visual

    <tr>
     <td>Computed value:

     <td>&lt;length&gt;

    <tr>
     <td class=footnote colspan=2>*) if the <em><a
      href="#containing">containing block</a></em> is <a
      href="#horizontal"><em>horizontal,</em></a> otherwise the height
  </table>

  <p>Sets the thickness of the <em><a href="#padding">padding area.</a></em>
   The value may not be negative.

  <p>&lsquo;<a class=property href="#padding1">Padding</a>&rsquo; is a
   shorthand for the other four properties. If &lsquo;<a class=property
   href="#padding1">padding</a>&rsquo; has four values, they are for top,
   right, bottom and left in that order. If left is omitted, it is the same
   as right. If bottom is omitted it is the same as top, if right is omitted
   it is the same as top.

  <p class=note>Note that percentages on &lsquo;<a class=property
   href="#padding-top">padding-top</a>&rsquo; and &lsquo;<a class=property
   href="#padding-bottom">padding-bottom</a>&rsquo; are relative to the
   <em><a href="#width">width</a></em> of the containing block, not the
   height (at least in a horizontal flow; in a vertical flow they are
   relative to the height).

  <p class=note>Note that percentages are not required for CSS level 2.

  <div class=example>
   <p>For example, the following two ways to set the padding of
    <code>h1</code> are equivalent:</p>

   <pre>h1 { padding: 0.5em }
h1 { padding-top: 0.5em;
     padding-right: 0.5em;
     padding-bottom: 0.5em;
     padding-left: 0.5em }</pre>
  </div>

  <h2 id=margins><span class=secno>6. </span>Margins</h2>

  <h3 id=the-margin><span class=secno>6.1. </span>The margin properties</h3>

  <table class=propdef id=namemargin-top>
   <tbody>
    <tr>
     <td>Name:

     <td><dfn id=margin-top>margin-top</dfn> , <dfn
      id=margin-right>margin-right</dfn>, <dfn
      id=margin-bottom>margin-bottom</dfn>, <dfn
      id=margin-left>margin-left</dfn>

    <tr>
     <td>Value:

     <td><var><a href="#ltlengthgt">&lt;length&gt;</a></var> |
      <var>&lt;percentage&gt;</var> | auto

    <tr>
     <td>Initial:

     <td>0

    <tr>
     <td>Applies to:

     <td>see text

    <tr>
     <td>Inherited:

     <td>no

    <tr>
     <td>Percentages:

     <td>width* of containing block

    <tr>
     <td>Media:

     <td>visual

    <tr>
     <td>Computed value:

     <td>the percentage as specified or the absolute length or &lsquo;<code
      class=css>auto</code>&rsquo;

    <tr>
     <td class=footnote colspan=2>*) if the <em><a
      href="#containing">containing block</a></em> is <em><a
      href="#horizontal">horizontal,</a></em> otherwise the height
  </table>

  <table class=propdef id=namemargin>
   <tbody>
    <tr>
     <td>Name:

     <td><dfn id=margin1>margin</dfn>

    <tr>
     <td>Value:

     <td>[ <var><a href="#ltlengthgt">&lt;length&gt;</a></var> |
      <var>&lt;percentage&gt;</var> | auto ]{1,4}

    <tr>
     <td>Initial:

     <td>(see individual properties)

    <tr>
     <td>Applies to:

     <td>see text

    <tr>
     <td>Inherited:

     <td>no

    <tr>
     <td>Percentages:

     <td>width* of containing block

    <tr>
     <td>Media:

     <td>visual

    <tr>
     <td>Computed value:

     <td>see individual properties

    <tr>
     <td class=footnote colspan=2>*) if the <em><a
      href="#containing">containing block</a></em> is <em><a
      href="#horizontal">horizontal,</a></em> otherwise the height
  </table>

  <p>These properties set the thickness of the <em><a href="#margin">margin
   area</a></em>. The value may be negative.

  <p>&lsquo;<a class=property href="#margin1">Margin</a>&rsquo; is a
   shorthand for the other four. If &lsquo;<a class=property
   href="#margin1">margin</a>&rsquo; has four values, they set top, right,
   bottom and left in that order. If left is omitted, it is the same as
   right. If bottom is omitted, it is the same as top. If right is omitted it
   is the same as top.

  <p>The properties apply to all boxes except certain table-* boxes (see <a
   href="#CSS3TBL" rel=biblioentry>[CSS3TBL]<!--{{CSS3TBL}}--></a>) and
   certain inline-level boxes (see <a href="#CSS3TEXT"
   rel=biblioentry>[CSS3TEXT]<!--{{!CSS3TEXT}}--></a>).

  <p>Margins must satisfy certain constraints, which means that the used
   value may be different from the computed value. See <a
   href="#Calculating">&ldquo;Calculating widths, heights and
   margins.&rdquo;</a>

  <p class=note>Note that in a <span>horizontal flow,</span> percentages on
   &lsquo;<a class=property href="#margin-top">margin-top</a>&rsquo; and
   &lsquo;<a class=property href="#margin-bottom">margin-bottom</a>&rsquo;
   are relative to the <em><a href="#width">width</a></em> of the containing
   block, not the height (and in vertical flow, &lsquo;<a class=property
   href="#margin-left">margin-left</a>&rsquo; and &lsquo;<a class=property
   href="#margin-right">margin-right</a>&rsquo; are relative to the height,
   not the width).

  <div class=example>
   <p>For example, the following two ways of setting the margins of
    <code>p</code> are equivalent:</p>

   <pre>p { margin: 1em 2em }
p { margin-top: 1em;
    margin-right: 2em;
    margin-bottom: 1em;
    margin-left: 2em }</pre>
  </div>

  <h3 id=collapsing-margins><span class=secno>6.2. </span>Collapsing margins</h3>

  <p>Certain adjoining margins combine to form a single margin. Those margins
   are said to &ldquo;collapse.&rdquo; Margins are adjoining if there are no
   nonempty content, <a href="#padding" title="padding area">padding</a> or
   <a href="#border" title="border area">border areas</a> or
   <em>clearance</em> to separate them.

  <div class=example>
   <p>For example, in the following fragment with the given style rules:</p>

   <pre>p { display: block; margin: 2em 0 1em 0 }
div { display: block; margin: 2.5em 0 }
...
&lt;p&gt;First paragraph&lt;/p&gt;
&lt;div&gt;
  &lt;p&gt;Second paragraph&lt;/p&gt;
&lt;/div&gt;</pre>

   <p>the bottom margin of the first <code>p</code> (=1em), the top margin of
    the <code>div</code> (=2.5em) and the top margin of the second
    <code>p</code> (=2em) collapse. The result is a single margin of 2.5em
    (the maximum of the three) between the bottom of the first <code>p</code>
    and the top of the second.</p>

   <p class=issue>[add image]</p>
  </div>

  <div class=example>
   <p>In the following fragment,</p>

   <pre>p { display: block; margin: 2em 0 1em 0 }
div { display: block; margin: 2.5em 0;
      border: thin solid }
...
&lt;p&gt;First paragraph&lt;/p&gt;
&lt;div&gt;
  &lt;p&gt;Second paragraph&lt;/p&gt;
&lt;/div&gt;</pre>

   <p>the bottom margin of the first <code>p</code> and the top margin of the
    <code>div</code> collapse, but the top margin of the second
    <code>p</code> does not collapse with them, because it is not adjoining;
    the border of the <code>div</code> separates them.</p>

   <p class=issue>[add image]</p>
  </div>

  <p>If a set of adjoining margins collapses, then the width of the resulting
   margin is <var>M</var> - <var>N</var>, where <var>M</var> is the maximum
   of the adjoining margins that are positive, or zero if there are none; and
   <var>N</var> is the minimum of the adjoining margins that are negative, or
   zero if there are none.

  <p>We call an element or box <dfn id=collapsed>collapsed through</dfn> if
   two of its margins collapse with each other.

  <div class=example>
   <p>The most common use of collapsing through elements is that empty
    paragraphs don't cause extra white space:</p>

   <pre>&lt;p>First paragraph
&lt;p>Second paragraph
&lt;p>
&lt;p>Last paragraph</pre>

   <p>There is equal space between the first and second paragraphs as between
    the second and last.</p>
  </div>

  <p>The following two sets of rules determine which margins collapse.

  <ul>
   <li>Only margins of <em><a href="#block-level">block-level</a></em> boxes
    can collapse.

   <li>Margins of a floated box do not collapse with any other margins.

   <li>Margins of a box with &lsquo;<a class=property
    href="#overflow0">overflow</a>&rsquo; other than &lsquo;<code
    class=css><a href="#visible0">visible</a></code>&rsquo; do not collapse
    with its children's margins.

   <li>Margins of an absolutely positioned box (see <a href="#CSS3POS"
    rel=biblioentry>[CSS3POS]<!--{{CSS3POS}}--></a>) do not collapse with any
    other margins.

   <li>Margins of an &lsquo;<code class=css><a
    href="#inline-block">inline-block</a></code>&rsquo; box do not collapse
    (not even with its in-flow children). <span class=issue>Assuming the
    first rule above (“only block-level”) is correct, this rule seems
    redundant, because an inline block is not block-level.</span>

   <li>Margins of the root element's box do not collapse.

   <li>If a box is <em><a href="#collapsed">collapsed through</a></em> and it
    has <em>clearance</em> applied to one of the collapsed margins, then
    those margins do not collapse with certain of the parent's margins: If
    clearance is applied to, respectively, the top, right or left margin,
    then those margins do not collapse with the parent's bottom, left or
    right margin, respectively.
  </ul>

  <p>Except when forbidden by the list above, the following margins collapse:

  <ul><!-- transitive -->

   <li>
    <p>If a margin P collapses with a margin Q and margin Q with a margin R,
     then P, Q and R collapse together. (“Collapsing is transitive”)
     <!-- parent-child / horizontal / top --></p>

   <li>
    <p>The top margin of a box A collapses with the top margin of its parent
     box B if the margins are adjoining and B is &lsquo;<code
     class=css>tb</code>&rsquo;.</p>

    <p class=note>Note that A itself may be vertical box.
     <!-- parent-child / horizontal / bottom --></p>

   <li>
    <p>The bottom margin of a box A collapses with the bottom margin of its
     parent box B if the margins are adjoining and B is &lsquo;<code
     class=css>tb</code>&rsquo;. <!-- parent-child / vertical / left --></p>

   <li>
    <p>The left margin of a box A collapses with the left margin of its
     parent box B if the margins are adjoining and B is &lsquo;<code
     class=css>rl</code>&rsquo; or &lsquo;<code class=css>lr</code>&rsquo;.
     <!-- parent-child / vertical / right --></p>

   <li>
    <p>The right margin of a box A collapses with the right margin of its
     parent box B if the margins are adjoining and B is &lsquo;<code
     class=css>rl</code>&rsquo; or &lsquo;<code class=css>lr</code>&rsquo;.
     <!-- sibling / horizontal --></p>

   <li>
    <p>The top margin of a box A collapses with the bottom margin of a
     sibling box B if the margins are adjoining and their parent is
     &lsquo;<code class=css>tb</code>&rsquo;. <!-- sibling / vertical --></p>

   <li>
    <p>A right margin of a box A collapses with the left margin of a sibling
     box B if the margins are adjoining and their parent is &lsquo;<code
     class=css>rl</code>&rsquo; or &lsquo;<code class=css>lr</code>&rsquo;.
     <!-- self / horizontal --></p>

   <li>
    <p>The top and bottom margins of a box A collapse if the margins are
     adjoining and the box is &lsquo;<code class=css>tb</code>&rsquo;. (The
     box is <em><a href="#collapsed">“collapsed through.”</a></em>)</p>

    <p>In this case, the position of the element depends on its relationship
     with the other elements whose margins are being collapsed.</p>

    <ul>
     <li>If the box A's margins are collapsed with its parent's top margin,
      the top border edge of A is defined to be the same as the parent's.

     <li>Otherwise, either the parent is not taking part in the margin
      collapsing, or only the parent's bottom margin is involved. The
      position of A's top border edge is the same as it would have been if A
      had a nonzero top border.
    </ul>

    <p class=note>Note that the positions of elements that have been
     collapsed through have no effect on the positions of the other elements
     with whose margins they are being collapsed; the top border edge
     position is only required for laying out descendants of these elements.
     <!-- self / vertical --></p>

   <li>
    <p>The left and right margins of a box A collapse (“collapse
     through”) if the margins are adjoining and the box is &lsquo;<code
     class=css>rl</code>&rsquo; or &lsquo;<code class=css>lr</code>&rsquo;.</p>

    <p>In this case, the position of the element depends on its relationship
     with the other elements whose margins are being collapsed.</p>

    <ul>
     <li>If A's parent is &lsquo;<code class=css>rl</code>&rsquo;:
      <ul>
       <li>If A's margins are collapsed with its parent's right margin, the
        right border edge of A is defined to be the same as the parent's.

       <li>Otherwise (i.e., either the element's parent is not taking part in
        the margin collapsing, or only the parent's left margin is involved),
        the position of A's right border edge is the same as it would have
        been if A had a nonzero top border.
      </ul>

     <li>If A's parent is &lsquo;<code class=css>lr</code>&rsquo;:
      <ul>
       <li>If A's margins are collapsed with its parent's left margin, the
        left border edge of A is defined to be the same as the parent's.

       <li>Otherwise (i.e., either the element's parent is not taking part in
        the margin collapsing, or only the parent's right margin is
        involved),, the position of A's left border edge is the same as it
        would have been if A had a nonzero left border.
      </ul>
    </ul>
  </ul>

  <div class=example>
   <p>In a horizontal flow, the bottom margin of an in-flow <a
    href="#block-level">block-level</a> element is always adjoining to the
    top margin of its next in-flow block-level sibling, unless that sibling
    has clearance:</p>

   <pre>
&lt;p style="margin-bottom: 2em">The bottom margin of this
box&hellip;&lt;/p>

&lt;p style="margin-top: 3em">&hellip; collapses with the top margin
of this box, to yield max(2em, 3em) = 3em margin.&lt;/p>
</pre>

   <p>The top margin of an in-flow block-level element is adjoining to its
    first in-flow block-level child's top margin if the element has no top
    border, no top padding, and the child has no clearance:</p>

   <pre>
&lt;div style="margin-top: 2em; padding: 0; border: 0">
  &lt;p style="margin-top: 3em">
    The top margin of the DIV and the P
    collapse, to yield max(2em, 3em) = 3em margin.
  &lt;/p>
&lt;/div>
</pre>

   <p>The bottom margin of an in-flow block-level element with a &lsquo;<a
    class=property href="#height">height</a>&rsquo; of &lsquo;<code
    class=css>auto</code>&rsquo; and &lsquo;<a class=property
    href="#min-height">min-height</a>&rsquo; less than the element's used
    height and &lsquo;<a class=property
    href="#max-height">max-height</a>&rsquo; greater than the element's used
    height is adjoining to its last in-flow block-level child's bottom margin
    if the element has no bottom padding or border:</p>

   <pre>
&lt;div style="margin-bottom: 2em; padding: 0; border: 0;
    height: auto; min-height: 0; max-height: 100em">
  &lt;p style="margin-bottom: 3em">
    The bottom margin of the DIV and the P collapse, to yield max(2em,
    3em) = 3em margin.
  &lt;/p>
&lt;/div>
</pre>

   <p>An element's own margins are adjoining if the &lsquo;<a class=property
    href="#min-height">min-height</a>&rsquo; property is zero, and it has
    neither vertical borders nor vertical padding, and it has a &lsquo;<a
    class=property href="#height">height</a>&rsquo; of either 0 or
    &lsquo;<code class=css>auto</code>&rsquo;, and it does not contain a line
    box, and all of its in-flow children's margins (if any) are adjoining:</p>

   <pre>
&lt;div style="margin-top: 2em; margin-bottom: 3em">
  &lt;p style="position: absolute">
    The DIV is empty and its top and bottom margins collapse.
  &lt;/p>
&lt;/div>
</pre>

   <p>When an element's own margins collapse, and that element has had
    clearance applied to it, its top margin collapses with the adjoining
    margins of subsequent siblings but that resulting margin does not
    collapse with the bottom margin of the parent block:</p>

   <pre>
&lt;div style="margin-bottom: 2em">
  &lt;p style="float: left">
    The margins of the next two Ps collapse
  &lt;p style="clear: left; margin-top: 4em; margin-bottom: 3em">
    <!-- empty -->
  &lt;/p>
  &lt;p style="margin-top: 1em; margin-bottom: 1em">
    <!-- empty -->
  &lt;/p>
&lt;/div>
</pre>

   <p>The top and bottom margins of the two empty Ps collapse all together.
    But they can't collapse with the bottom of the DIV, because one of the
    two empty P's has clearance.</p>

   <p class=issue>Check this. This is probably the only possible
    interpretation of the rules, but it is certainly not obvious that the
    clearance of one element may stop later elements from collapsing&hellip;</p>
  </div>

  <p>Collapsing is based on the used value of &lsquo;<a class=property
   href="#padding1">padding</a>&rsquo;, &lsquo;<a class=property
   href="#margin1">margin</a>&rsquo;, and &lsquo;<a class=property
   href="#border1">border</a>&rsquo; (i.e., after resolving any percentages).
   The collapsed margin is calculated over the used value of the various
   margins.

  <h2 id=the-lsquo0><span class=secno>7. </span>The &lsquo;<a class=property
   href="#width">width</a>&rsquo; and &lsquo;<a class=property
   href="#height">height</a>&rsquo; properties</h2>

  <table class=propdef id=namewidth>
   <tbody>
    <tr>
     <td>Name:

     <td><dfn id=width>width</dfn>

    <tr>
     <td>Value:

     <td><var>&lt;length></var> | <var>&lt;percentage></var> | auto

    <tr>
     <td>Initial:

     <td>auto

    <tr>
     <td>Applies to:

     <td>all elements but non-replaced inline elements, table rows, and row
      groups

    <tr>
     <td>Inherited:

     <td>no

    <tr>
     <td>Percentages:

     <td>refer to width of containing block

    <tr>
     <td>Media:

     <td>visual

    <tr>
     <td>Computed value:

     <td>the percentage or &lsquo;<code class=css>auto</code>&rsquo; as
      specified or the absolute length; &lsquo;<code
      class=css>auto</code>&rsquo; if the property does not apply
  </table>

  <table class=propdef id=nameheight>
   <tbody>
    <tr>
     <td>Name:

     <td><dfn id=height>height</dfn>

    <tr>
     <td>Value:

     <td><var>&lt;length></var> | <var>&lt;percentage></var> | auto

    <tr>
     <td>Initial:

     <td>auto

    <tr>
     <td>Applies to:

     <td>all elements but non-replaced inline elements, table columns, and
      column groups

    <tr>
     <td>Inherited:

     <td>no

    <tr>
     <td>Percentages:

     <td>see prose

    <tr>
     <td>Media:

     <td>visual

    <tr>
     <td>Computed value:

     <td>the percentage or &lsquo;<code class=css>auto</code>&rsquo; (see
      prose under &lt;percentage>) or the absolute length; &lsquo;<code
      class=css>auto</code>&rsquo; if the property does not apply
  </table>

  <p>These properties specify the width and height of the <em><a
   href="#content">content area,</a></em> <em><a href="#padding">padding
   area</a></em> or <em><a href="#border">border area</a></em> (depending on
   &lsquo;<span class=property>box-sizing</span>&rsquo;) of certain boxes.

  <p>Values have the following meanings:

  <dl>
   <dt><var>&lt;length></var>

   <dd>Specifies the width of the content area using a length unit.

   <dt><var>&lt;percentage></var>

   <dd>Specifies a percentage width. The percentage is calculated with
    respect to the width of the generated box's <a
    href="#containing">containing block.</a> If the containing block's width
    depends on this element's width, then the resulting layout is undefined
    in CSS3.

   <dt>auto

   <dd>The width depends on the values of other properties. See the sections
    below.
  </dl>

  <p class=note>Do we want to define unknown percentages in CSS3? Something
   simple, such as &lsquo;<code class=css>auto</code>&rsquo;, or something
   more fancy, such as trying to solve percentages?

  <p>Negative values are illegal.

  <div class=example>
   <p>For example, the following rule fixes the content width of paragraphs
    at 100 px:</p>

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

  <h2 id=min-max><span class=secno>8. </span>The &lsquo;<a class=property
   href="#min-width">min-width</a>&rsquo;, &lsquo;<a class=property
   href="#max-width">max-width</a>&rsquo;, &lsquo;<a class=property
   href="#min-height">min-height</a>&rsquo; and &lsquo;<a class=property
   href="#max-height">max-height</a>&rsquo; properties</h2>

  <table class=propdef id=namemin-width>
   <tbody>
    <tr>
     <td>Name:

     <td><dfn id=min-width>min-width</dfn>, <dfn
      id=min-height>min-height</dfn>

    <tr>
     <td>Value:

     <td><var><a href="#ltlengthgt">&lt;length&gt;</a></var> |
      <var>&lt;percentage&gt;</var> | inherit

    <tr>
     <td>Initial:

     <td>0

    <tr>
     <td>Applies to:

     <td>all elements but non-replaced inline elements, table rows, and row
      groups

    <tr>
     <td>Inherited:

     <td>no

    <tr>
     <td>Percentages:

     <td>refer to width, resp. height of containing block

    <tr>
     <td>Media:

     <td>visual

    <tr>
     <td>Computed value:

     <td>the percentage as specified or the absolute length
  </table>

  <table class=propdef id=namemax-width>
   <tbody>
    <tr>
     <td>Name:

     <td><dfn id=max-width>max-width</dfn>, <dfn
      id=max-height>max-height</dfn>

    <tr>
     <td>Value:

     <td><var><a href="#ltlengthgt">&lt;length&gt;</a></var> |
      <var>&lt;percentage&gt;</var> | none

    <tr>
     <td>Initial:

     <td>none

    <tr>
     <td>Applies to:

     <td>all elements but non-replaced inline elements, table rows, and row
      groups

    <tr>
     <td>Inherited:

     <td>no

    <tr>
     <td>Percentages:

     <td>refer to width, resp. height of containing block

    <tr>
     <td>Media:

     <td>visual

    <tr>
     <td>Computed value:

     <td>the percentage as specified or the absolute length or &lsquo;<code
      class=css><a href="#none0">none</a></code>&rsquo;
  </table>

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

  <dl>
   <dt><var><a href="#ltlengthgt">&lt;length&gt;</a></var>

   <dd>Specifies a fixed minimum or maximum for &lsquo;<a class=property
    href="#width">width</a>&rsquo; or &lsquo;<a class=property
    href="#height">height</a>&rsquo;.

   <dt><var>&lt;percentage&gt;</var>

   <dd>Specifies a minimum or maximum for &lsquo;<a class=property
    href="#width">width</a>&rsquo; or &lsquo;<a class=property
    href="#height">height</a>&rsquo; as a percentage of the corresponding
    dimension of the <em><a href="#containing">containing block.</a></em> If
    that containing block's dimension is negative, the used value is zero. If
    that containing block's dimension depends on this element's dimension,
    then the resulting layout is undefined. <span class=issue>Or: use the
    initial value?</span>

   <dt><strong><a href="#none0">none</a></strong>

   <dd>No limit on the width or height of the box.
  </dl>

  <p>Negative values are illegal.

  <h2 id=Calculating><span class=secno>9. </span>Calculating widths, heights
   and margins</h2>

  <p>The following two algorithms define the <em><a href="#used-value.">used
   value</a></em> of &lsquo;<a class=property href="#width">width</a>&rsquo;
   and &lsquo;<a class=property href="#height">height</a>&rsquo; respectively
   and also the used values of the &lsquo;<a class=property
   href="#margin1">margin</a>&rsquo; properties and of &lsquo;<a
   class=property href="#top">top</a>&rsquo;, &lsquo;<a class=property
   href="#right">right</a>&rsquo; &lsquo;<a class=property
   href="#bottom">bottom</a>&rsquo; and &lsquo;<a class=property
   href="#left">left</a>&rsquo;.

  <p class=note>Note that they do not affect the computed values of &lsquo;<a
   class=property href="#width">width</a>&rsquo; and &lsquo;<a class=property
   href="#height">height</a>&rsquo;. Also note that in some cases the used
   width has to be known in order to calculate the used height, or vice
   versa,

  <p>For &lsquo;<a class=property href="#width">width</a>&rsquo;:

  <ol>
   <li>The tentative used width is calculated (without &lsquo;<a
    class=property href="#min-width">min-width</a>&rsquo;, and &lsquo;<a
    class=property href="#max-width">max-width</a>&rsquo;) following the
    rules in the subsections below.

   <li>If the tentative used width is greater than &lsquo;<a class=property
    href="#max-width">max-width</a>&rsquo;, the same rules are applied again,
    but this time using the computed value of &lsquo;<a class=property
    href="#max-width">max-width</a>&rsquo; as the computed value for 'width.

   <li>If the resulting width is smaller than &lsquo;<a class=property
    href="#min-width">min-width</a>&rsquo;, the same rules are applied again,
    but this time using the computed value of &lsquo;<a class=property
    href="#min-width">min-width</a>&rsquo; as the computed value for
    &lsquo;<a class=property href="#width">width</a>&rsquo;.
  </ol>

  <p>For &lsquo;<a class=property href="#height">height</a>&rsquo;:

  <ol>
   <li>The tentative used height is calculated (without &lsquo;<a
    class=property href="#min-height">min-height</a>&rsquo;, and &lsquo;<a
    class=property href="#max-height">max-height</a>&rsquo;) following the
    rules under <a href="#Calculating"> “Calculating widths, heights and
    margins”</a> below.

   <li>If the tentative used height is greater than &lsquo;<a class=property
    href="#max-height">max-height</a>&rsquo;, the same rules are applied
    again, but this time using the computed value of &lsquo;<a class=property
    href="#max-height">max-height</a>&rsquo; as the computed value for
    'height.

   <li>If the resulting height is smaller than &lsquo;<a class=property
    href="#min-height">min-height</a>&rsquo;, the same rules are applied
    again, but this time using the computed value of &lsquo;<a class=property
    href="#min-height">min-height</a>&rsquo; as the computed value for
    &lsquo;<a class=property href="#height">height</a>&rsquo;.
  </ol>

  <p>However, for replaced elements with an intrinsic ratio and both
   &lsquo;<a class=property href="#width">width</a>&rsquo; and &lsquo;<a
   class=property href="#height">height</a>&rsquo; specified as &lsquo;<code
   class=css>auto</code>&rsquo;, the algorithm is as follows:

  <p>Select from the table the resolved height and width values for the
   appropriate constraint violation. Take the <var><a
   href="#max-width">max-width</a></var> and <var><a
   href="#max-height">max-height</a></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 &lsquo;<a class=property
   href="#min-width">min-width</a>&rsquo;, &lsquo;<a class=property
   href="#min-height">min-height</a>&rsquo;, &lsquo;<a class=property
   href="#max-width">max-width</a>&rsquo; and &lsquo;<a class=property
   href="#max-height">max-height</a>&rsquo; properties. Normally these are
   the intrinsic width and height, but they may not be in the case of
   replaced elements with intrinsic ratios.

  <table class=equiv-table>
   <thead>
    <tr>
     <th>Constraint violation

     <th>Resolved width

     <th>Resolved height

   <tbody>
    <tr>
     <td>none

     <td><var>w</var>

     <td><var>h</var>

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

     <td><var><a href="#max-width">max-width</a></var>

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

    <tr>
     <td><var>w&nbsp;&lt;&nbsp;min-width</var>

     <td><var><a href="#min-width">min-width</a></var>

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

    <tr>
     <td><var>h&nbsp;>&nbsp;max-height</var>

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

     <td><var><a href="#max-height">max-height</a></var>

    <tr>
     <td><var>h&nbsp;&lt;&nbsp;min-height</var>

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

     <td><var><a href="#min-height">min-height</a></var>

    <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><var><a href="#max-width">max-width</a></var>

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

    <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><var>max(min-width, max-height&nbsp;*&nbsp;w/h)</var>

     <td><var><a href="#max-height">max-height</a></var>

    <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><var>min(max-width, min-height&nbsp;*&nbsp;w/h)</var>

     <td><var><a href="#min-height">min-height</a></var>

    <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><var><a href="#min-width">min-width</a></var>

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

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

     <td><var><a href="#min-width">min-width</a></var>

     <td><var><a href="#max-height">max-height</a></var>

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

     <td><var><a href="#max-width">max-width</a></var>

     <td><var><a href="#min-height">min-height</a></var>
  </table>

  <p>Then apply the appropriate rules in the subsections below, as if
   &lsquo;<a class=property href="#width">width</a>&rsquo; and &lsquo;<a
   class=property href="#height">height</a>&rsquo; were computed as these
   values.

  <p class=note>Note that some values of the &lsquo;<a class=property
   href="#image-scaling">image-scaling</a>&rsquo; property (<a
   href="#CSS3PAGE" rel=biblioentry>[CSS3PAGE]<!--{{CSS3PAGE}}--></a>) may
   further change the used values of &lsquo;<a class=property
   href="#width">width</a>&rsquo; and &lsquo;<a class=property
   href="#height">height</a>&rsquo;.

  <p>The following subsections apply if the element's <em><a
   href="#containing">containing block</a></em> is <em><a
   href="#horizontal">horizontal.</a></em> If it is <em><a
   href="#vertical.">vertical,</a></em> the same rules apply, but with every
   occurrence of “left” replaced by “top,” “right” by
   “bottom,” “top” by “right,” “bottom” by “left”,
   “height” by “width” and “width” by “height.”

  <h3 id=inline-non-replaced><span class=secno>9.1. </span>Inline,
   non-replaced elements</h3>

  <p>The &lsquo;<a class=property href="#width">width</a>&rsquo; and
   &lsquo;<a class=property href="#height">height</a>&rsquo; properties do
   not apply. For each of &lsquo;<a class=property
   href="#left">left</a>&rsquo;, &lsquo;<a class=property
   href="#right">right</a>&rsquo;, &lsquo;<a class=property
   href="#top">top</a>&rsquo;, &lsquo;<a class=property
   href="#bottom">bottom</a>&rsquo;, &lsquo;<a class=property
   href="#margin-left">margin-left</a>&rsquo;, &lsquo;<a class=property
   href="#margin-right">margin-right</a>&rsquo;, &lsquo;<a class=property
   href="#margin-top">margin-top</a>&rsquo; and &lsquo;<a class=property
   href="#margin-bottom">margin-bottom</a>&rsquo;, the used value is equal to
   the computed value, except that a computed value of &lsquo;<code
   class=css>auto</code>&rsquo; becomes a used value of &lsquo;<code
   class=css>0</code>&rsquo;.

  <p class=note>Note that this section applies equally when the <em><a
   href="#containing">containing block</a></em> is <em><a
   href="#horizontal">horizontal</a></em> as when it is <em><a
   href="#vertical.">vertical.</a></em>

  <h3 id=inline-replaced><span class=secno>9.2. </span>Inline or floating,
   replaced elements</h3>

  <p>The used values of &lsquo;<a class=property
   href="#margin-left">margin-left</a>&rsquo;, &lsquo;<a class=property
   href="#margin-right">margin-right</a>&rsquo;, &lsquo;<a class=property
   href="#margin-top">margin-top</a>&rsquo; and &lsquo;<a class=property
   href="#margin-bottom">margin-bottom</a>&rsquo; are equal to the computed
   value, except that a computed value of &lsquo;<code
   class=css>auto</code>&rsquo; becomes a used value of &lsquo;<code
   class=css>0</code>&rsquo;.

  <p>If &lsquo;<a class=property href="#height">height</a>&rsquo; and
   &lsquo;<a class=property href="#width">width</a>&rsquo; both have computed
   values of &lsquo;<code class=css>auto</code>&rsquo; and the element also
   has an intrinsic width, then that intrinsic width is the used value of
   &lsquo;<a class=property href="#width">width</a>&rsquo;.

  <p>If &lsquo;<a class=property href="#height">height</a>&rsquo; and
   &lsquo;<a class=property href="#width">width</a>&rsquo; both have computed
   values of &lsquo;<code class=css>auto</code>&rsquo; and the element also
   has an intrinsic height, then that intrinsic height is the used value of
   &lsquo;<a class=property href="#height">height</a>&rsquo;.

  <p>If &lsquo;<a class=property href="#height">height</a>&rsquo; and
   &lsquo;<a class=property href="#width">width</a>&rsquo; both have computed
   values of &lsquo;<code class=css>auto</code>&rsquo; and the element has no
   intrinsic width, but does have an intrinsic height and intrinsic ratio; or
   if &lsquo;<a class=property href="#width">width</a>&rsquo; has a computed
   value of &lsquo;<code class=css>auto</code>&rsquo;, &lsquo;<a
   class=property href="#height">height</a>&rsquo; has some other computed
   value, and the element has an intrinsic ratio; then the used value of
   &lsquo;<a class=property href="#width">width</a>&rsquo; is:

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

  <p>If &lsquo;<a class=property href="#height">height</a>&rsquo; and
   &lsquo;<a class=property href="#width">width</a>&rsquo; both have computed
   values of &lsquo;<code class=css>auto</code>&rsquo; and the element has no
   intrinsic height, but does have an intrinsic width and intrinsic ratio; or
   if &lsquo;<a class=property href="#height">height</a>&rsquo; has a
   computed value of &lsquo;<code class=css>auto</code>&rsquo;, &lsquo;<a
   class=property href="#width">width</a>&rsquo; has some other computed
   value, and the element has an intrinsic ratio; then the used value of
   &lsquo;<a class=property href="#height">height</a>&rsquo; is:

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

  <p>If &lsquo;<a class=property href="#height">height</a>&rsquo; and
   &lsquo;<a class=property href="#width">width</a>&rsquo; both have computed
   values of &lsquo;<code class=css>auto</code>&rsquo; and the element has an
   intrinsic ratio but no intrinsic height or width and the containing
   block's width doesn't itself depend on the replaced element's width, then
   the used value of &lsquo;<a class=property href="#width">width</a>&rsquo;
   is calculated from the <a href="#width-constraints">constraint
   equation</a> used for block-level, non-replaced elements in normal flow.
   The used value for &lsquo;<a class=property
   href="#height">height</a>&rsquo; is: (used width) / (intrinsic ratio).

  <p>If &lsquo;<a class=property href="#width">width</a>&rsquo; has a
   computed value of &lsquo;<span class=property>auto</span>&rsquo;, but none
   of the conditions above are met, then the used value of &lsquo;<a
   class=property href="#width">width</a>&rsquo; 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.

  <p>If &lsquo;<a class=property href="#height">height</a>&rsquo; has a
   computed value of &lsquo;<span class=property>auto</span>&rsquo; and none
   of the rules above define its used value, then the used value of &lsquo;<a
   class=property href="#height">height</a>&rsquo; 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.

  <p class=issue>Theoretically, a device may be wider than than 300px but not
   tall enough for 150px. In that case the resulting replaced element will be
   too tall. But this is the formulation in CSS 2.1 and it seems not worth
   improving such an edge case.

  <p>Percentage intrinsic widths are first evaluated with respect to the
   containing block's width, if that width doesn't itself depend on the
   replaced element's width. If it does, then a percentage intrinsic width on
   that element can't be resolved and the element is assumed to have no
   intrinsic width.

  <p class=note>Note that this section applies equally when the <em><a
   href="#containing">containing block</a></em> is <em><a
   href="#horizontal">horizontal</a></em> as when it is <em><a
   href="#vertical.">vertical.</a></em>

  <h3 id=blockwidth><span class=secno>9.3. </span>Block-level, non-replaced
   elements in normal flow when &lsquo;<a class=property
   href="#overflow0">overflow</a>&rsquo; computes to &lsquo;<code
   class=css><a href="#visible0">visible</a></code>&rsquo;</h3>

  <p>This section also applies to <a href="#block-level">block-level</a>
   non-replaced elements in normal flow when &lsquo;<a class=property
   href="#overflow0">overflow</a>&rsquo; does not compute to &lsquo;<code
   class=css><a href="#visible0">visible</a></code>&rsquo; but has been
   propagated to the viewport.

  <p>The following constraints must hold among the used values of the
   properties.

  <blockquote id=width-constraints>
   <p>&lsquo;<a class=property href="#margin-left">margin-left</a>&rsquo; +
    &lsquo;<a class=property
    href="#border-left-width">border-left-width</a>&rsquo; + &lsquo;<a
    class=property href="#padding-left">padding-left</a>&rsquo; + &lsquo;<a
    class=property href="#width">width</a>&rsquo; + &lsquo;<a class=property
    href="#padding-right">padding-right</a>&rsquo; + &lsquo;<a class=property
    href="#border-right-width">border-right-width</a>&rsquo; + &lsquo;<a
    class=property href="#margin-right">margin-right</a>&rsquo; + scrollbar
    width (if any) = width of containing block
  </blockquote>

  <p>If &lsquo;<a class=property href="#width">width</a>&rsquo; is not
   &lsquo;<code class=css>auto</code>&rsquo; and &lsquo;<a class=property
   href="#border-left-width">border-left-width</a>&rsquo; + &lsquo;<a
   class=property href="#padding-left">padding-left</a>&rsquo; + &lsquo;<a
   class=property href="#width">width</a>&rsquo; + &lsquo;<a class=property
   href="#padding-right">padding-right</a>&rsquo; + &lsquo;<a class=property
   href="#border-right-width">border-right-width</a>&rsquo; + scrollbar width
   (if any) (plus any of &lsquo;<a class=property
   href="#margin-left">margin-left</a>&rsquo; or &lsquo;<a class=property
   href="#margin-right">margin-right</a>&rsquo; that are not &lsquo;<code
   class=css>auto</code>&rsquo;) is larger than the width of the containing
   block, then any &lsquo;<code class=css>auto</code>&rsquo; values for
   &lsquo;<a class=property href="#margin-left">margin-left</a>&rsquo; or
   &lsquo;<a class=property href="#margin-right">margin-right</a>&rsquo; are,
   for the following rules, treated as zero. <span class=issue>We should drop
   this paragraph. It causes blocks that are wider than their parent not to
   be centered (unlike blocks that are narrower), which looks strange.</span>

  <p>All the above properties that have a computed value other than
   &lsquo;<code class=css>auto</code>&rsquo; have a used value equal to the
   computed value, except if they all have a computed value other than
   &lsquo;<code class=css>auto</code>&rsquo;. Then 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 &lsquo;<a class=property
   href="#direction">direction</a>&rsquo; property of the containing block
   has the value &lsquo;<code class=css>ltr</code>&rsquo;, the specified
   value of &lsquo;<a class=property
   href="#margin-right">margin-right</a>&rsquo; is ignored and the value is
   calculated so as to make the equality true. If the value of &lsquo;<a
   class=property href="#direction">direction</a>&rsquo; is &lsquo;<code
   class=css>rtl</code>&rsquo;, this happens to &lsquo;<a class=property
   href="#margin-left">margin-left</a>&rsquo; instead.

  <p>If there is exactly one value specified as &lsquo;<code
   class=css>auto</code>&rsquo;, its used value follows from the equality.

  <p>If &lsquo;<a class=property href="#width">width</a>&rsquo; is set to
   &lsquo;<code class=css>auto</code>&rsquo;, any other &lsquo;<code
   class=css>auto</code>&rsquo; values become &lsquo;<code
   class=css>0</code>&rsquo; and &lsquo;<a class=property
   href="#width">width</a>&rsquo; follows from the resulting equality.

  <p>If both &lsquo;<a class=property
   href="#margin-left">margin-left</a>&rsquo; and &lsquo;<a class=property
   href="#margin-right">margin-right</a>&rsquo; are &lsquo;<code
   class=css>auto</code>&rsquo;, their used values are equal. This
   horizontally centers the element with respect to the edges of the
   containing block.

  <p>The “scrollbar width” value is only relevant if the user agent uses
   a scrollbar as its scrolling mechanism. See the definition of the
   &lsquo;<a class=property href="#overflow0">overflow</a>&rsquo; property.

  <p>If &lsquo;<a class=property href="#margin-top">margin-top</a>&rsquo;, or
   &lsquo;<a class=property href="#margin-bottom">margin-bottom</a>&rsquo;
   are &lsquo;<code class=css>auto</code>&rsquo;, their used value is 0. If
   &lsquo;<a class=property href="#height">height</a>&rsquo; is &lsquo;<code
   class=css>auto</code>&rsquo;, the height depends on whether the element
   has any <a href="#block-level">block-level</a> children and whether it has
   padding or borders:

  <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>If it has <a href="#block-level">block-level</a> children, the height is
   the distance between the top border-edge of the topmost block-level child
   box that doesn't have margins <a href="#collapsed">collapsed through</a>
   it and the bottom border-edge of the bottommost block-level child box that
   doesn't have margins collapsed through it. However, if the element has a
   nonzero top padding and/or top border, or is the root element, then the
   content starts at the top <em><a href="#margin1">margin</a></em> edge of
   the topmost child. (The first case expresses the fact that the top and
   bottom margins of the element <a href="#collapsing-margins">collapse</a>
   with those of the topmost and bottommost children, while in the second
   case the presence of the padding/border prevents the top margins from
   collapsing.) Similarly, if the element has a nonzero bottom padding and/or
   bottom border, then the content ends at the bottom <em><a
   href="#margin1">margin</a></em> edge of the bottommost child.

  <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 <em>anonymous block box.</em>

  <h3 id=other><span class=secno>9.4. </span>Other block-level, non-replaced
   elements in normal flow</h3>

  <p>This section applies to <a href="#block-level">block-level,</a>
   non-replaced elements when &lsquo;<a class=property
   href="#overflow0">overflow</a>&rsquo; does not compute to &lsquo;<code
   class=css><a href="#visible0">visible</a></code>&rsquo; (except if the
   &lsquo;<a class=property href="#overflow0">overflow</a>&rsquo; property's
   value has been propagated to the viewport).

  <p>Apply the rules for <a href="#blockwidth">block-level, non-replaced
   elements in normal flow,</a> but ignore the resulting values for &lsquo;<a
   class=property href="#height">height</a>&rsquo;, &lsquo;<a class=property
   href="#margin-top">margin-top</a>&rsquo; and &lsquo;<a class=property
   href="#margin-bottom">margin-bottom</a>&rsquo;.

  <p>If &lsquo;<a class=property href="#margin-top">margin-top</a>&rsquo;, or
   &lsquo;<a class=property href="#margin-bottom">margin-bottom</a>&rsquo;
   are &lsquo;<code class=css>auto</code>&rsquo;, their used value is 0. If
   &lsquo;<a class=property href="#height">height</a>&rsquo; is &lsquo;<code
   class=css>auto</code>&rsquo;, its used value is defined by <a
   href="#root-height">“&lsquo;<code class=css>Auto</code>&rsquo; heights
   for flow roots.”</a>

  <h3 id=lsquo><span class=secno>9.5. </span>&lsquo;<a class=property
   href="#inline-block">Inline-block</a>&rsquo; or floating, non-replaced
   elements</h3>

  <p>The used values of &lsquo;<a class=property
   href="#margin-left">margin-left</a>&rsquo;, &lsquo;<a class=property
   href="#margin-right">margin-right</a>&rsquo;, &lsquo;<a class=property
   href="#margin-top">margin-top</a>&rsquo; and &lsquo;<a class=property
   href="#margin-bottom">margin-bottom</a>&rsquo; are their computed values,
   except that a computed value of &lsquo;<code class=css>auto</code>&rsquo;
   gives a used value of 0.

  <p>The used value of &lsquo;<a class=property
   href="#width">width</a>&rsquo; is the computed value, unless that is
   &lsquo;<code class=css>auto</code>&rsquo;, when used value is the <a
   href="#shrink-to-fit">shrink-to-fit</a> width.

  <p>The used value of &lsquo;<a class=property
   href="#height">height</a>&rsquo; is the computed value, unless that is
   &lsquo;<code class=css>auto</code>&rsquo;, when the used value is defined
   by <a href="#root-height">“&lsquo;<code class=css>Auto</code>&rsquo;
   heights for flow roots.”</a>

  <p>For inline-block boxes, the margin box is used when calculating the
   height of the line box. <span class=issue>Does this belong here?</span>

  <h3 id=abs-non-replaced-width><span class=secno>9.6. </span>Absolutely
   positioned, non-replaced elements</h3>

  <p>For the purposes of this section and the next, the term <dfn
   id=static>static position</dfn> (of an element) refers, roughly, to the
   position an element would have had in the normal flow. More precisely:

  <ul>
   <li>The static position for &lsquo;<a class=property
    href="#left">left</a>&rsquo; 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 &lsquo;<a class=property
    href="#position">position</a>&rsquo; property had been &lsquo;<code
    class=css>static</code>&rsquo; and &lsquo;<a class=property
    href="#float">float</a>&rsquo; had been &lsquo;<a class=property
    href="#none0">none</a>&rsquo;. The value is negative if the box's margin
    is to the left of the containing block's edge.

   <li>The static position for &lsquo;<a class=property
    href="#right">right</a>&rsquo; 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 box's margin is to the left of the
    containing block's edge.

   <li>The static position for &lsquo;<a class=property
    href="#top">top</a>&rsquo; is the distance from the top edge of the
    containing block to the top margin edge of the same hypothetical box as
    above. The value is negative if the box's margin is above the containing
    block's edge.

   <li>The static position for &lsquo;<a class=property
    href="#bottom">bottom</a>&rsquo; is the distance from the bottom edge of
    the containing block to the bottom margin edge of the same hypothetical
    box as above. The value is positive if the box's margin is above the
    containing block's edge.
  </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>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>This constraint must hold among the used values:

  <blockquote>
   <p>&lsquo;<a class=property href="#left">left</a>&rsquo; + &lsquo;<a
    class=property href="#margin-left">margin-left</a>&rsquo; + &lsquo;<a
    class=property href="#border-left-width">border-left-width</a>&rsquo; +
    &lsquo;<a class=property href="#padding-left">padding-left</a>&rsquo; +
    &lsquo;<a class=property href="#width">width</a>&rsquo; + &lsquo;<a
    class=property href="#padding-right">padding-right</a>&rsquo; + &lsquo;<a
    class=property href="#border-right-width">border-right-width</a>&rsquo; +
    &lsquo;<a class=property href="#margin-right">margin-right</a>&rsquo; +
    &lsquo;<a class=property href="#right">right</a>&rsquo; + scrollbar width
    (if any) = width of containing block
  </blockquote>

  <p>If all three of &lsquo;<a class=property href="#left">left</a>&rsquo;,
   &lsquo;<a class=property href="#width">width</a>&rsquo;, and &lsquo;<a
   class=property href="#right">right</a>&rsquo; are &lsquo;<code
   class=css>auto</code>&rsquo;: First set any &lsquo;<code
   class=css>auto</code>&rsquo; values for &lsquo;<a class=property
   href="#margin-left">margin-left</a>&rsquo; and &lsquo;<a class=property
   href="#margin-right">margin-right</a>&rsquo; to 0. Then, if the &lsquo;<a
   class=property href="#direction">direction</a>&rsquo; property of the
   containing block is &lsquo;<code class=css>ltr</code>&rsquo; set &lsquo;<a
   class=property href="#left">left</a>&rsquo; to the <em><a
   href="#static">static position</a></em> and apply rule number three below;
   otherwise, set &lsquo;<a class=property href="#right">right</a>&rsquo; to
   the <em><a href="#static">static position</a></em> and apply rule number
   one below.

  <p>If none of the three is &lsquo;<code class=css>auto</code>&rsquo;: If
   both &lsquo;<a class=property href="#margin-left">margin-left</a>&rsquo;
   and &lsquo;<a class=property href="#margin-right">margin-right</a>&rsquo;
   are &lsquo;<code class=css>auto</code>&rsquo;, 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 &lsquo;<code class=css>ltr</code>&rsquo; (&lsquo;<code
   class=css>rtl</code>&rsquo;), set &lsquo;<a class=property
   href="#margin-left">margin-left</a>&rsquo; (&lsquo;<a class=property
   href="#margin-right">margin-right</a>&rsquo;) to zero and solve for
   &lsquo;<a class=property href="#margin-right">margin-right</a>&rsquo;
   (&lsquo;<a class=property href="#margin-left">margin-left</a>&rsquo;).
   <span class=issue>Should we remove the phrase starting with
   “unless”?</span> If one of &lsquo;<a class=property
   href="#margin-left">margin-left</a>&rsquo; or &lsquo;<a class=property
   href="#margin-right">margin-right</a>&rsquo; is &lsquo;<code
   class=css>auto</code>&rsquo;, solve the equation for that value. If the
   values are over-constrained, ignore the value for &lsquo;<a class=property
   href="#left">left</a>&rsquo; (in case the &lsquo;<a class=property
   href="#direction">direction</a>&rsquo; property of the containing block is
   &lsquo;<code class=css>rtl</code>&rsquo;) or &lsquo;<a class=property
   href="#right">right</a>&rsquo; (in case &lsquo;<a class=property
   href="#direction">direction</a>&rsquo; is &lsquo;<code
   class=css>ltr</code>&rsquo;) and solve for that value.

  <p>Otherwise, set &lsquo;<code class=css>auto</code>&rsquo; values for
   &lsquo;<a class=property href="#margin-left">margin-left</a>&rsquo; and
   &lsquo;<a class=property href="#margin-right">margin-right</a>&rsquo; to
   0, and pick the one of the following six rules that applies.

  <ol>
   <li>&lsquo;<a class=property href="#left">left</a>&rsquo; and &lsquo;<a
    class=property href="#width">width</a>&rsquo; are &lsquo;<code
    class=css>auto</code>&rsquo; and &lsquo;<a class=property
    href="#right">right</a>&rsquo; is not &lsquo;<code
    class=css>auto</code>&rsquo;, then the width is <em><a
    href="#shrink-to-fit0">shrink-to-fit.</a></em> Then solve for &lsquo;<a
    class=property href="#left">left</a>&rsquo;.

   <li>&lsquo;<a class=property href="#left">left</a>&rsquo; and &lsquo;<a
    class=property href="#right">right</a>&rsquo; are &lsquo;<code
    class=css>auto</code>&rsquo; and &lsquo;<a class=property
    href="#width">width</a>&rsquo; is not &lsquo;<code
    class=css>auto</code>&rsquo;, then if the &lsquo;<a class=property
    href="#direction">direction</a>&rsquo; property of the containing block
    is &lsquo;<code class=css>ltr</code>&rsquo; set &lsquo;<a class=property
    href="#left">left</a>&rsquo; to the <em><a href="#static">static
    position</a></em>, otherwise set &lsquo;<a class=property
    href="#right">right</a>&rsquo; to the <em><a href="#static">static
    position</a></em>. Then solve for &lsquo;<a class=property
    href="#left">left</a>&rsquo; (if &lsquo;<code class=css>direction is
    </code>&rsquo;'rtl&lsquo;<code class=css>) or &lsquo;<a class=property
    href="#right">right</a>&rsquo; (if &lsquo;<a class=property
    href="#direction">direction</a>&rsquo; is </code>&rsquo;ltr'').

   <li>&lsquo;<a class=property href="#width">width</a>&rsquo; and &lsquo;<a
    class=property href="#right">right</a>&rsquo; are &lsquo;<code
    class=css>auto</code>&rsquo; and &lsquo;<a class=property
    href="#left">left</a>&rsquo; is not &lsquo;<code
    class=css>auto</code>&rsquo;, then the width is <em><a
    href="#shrink-to-fit0">shrink-to-fit.</a></em> Then solve for &lsquo;<a
    class=property href="#right">right</a>&rsquo;.

   <li>&lsquo;<a class=property href="#left">left</a>&rsquo; is &lsquo;<code
    class=css>auto</code>&rsquo;, &lsquo;<a class=property
    href="#width">width</a>&rsquo; and &lsquo;<a class=property
    href="#right">right</a>&rsquo; are not &lsquo;<code
    class=css>auto</code>&rsquo;, then solve for &lsquo;<a class=property
    href="#left">left</a>&rsquo;.

   <li>&lsquo;<a class=property href="#width">width</a>&rsquo; is
    &lsquo;<code class=css>auto</code>&rsquo;, &lsquo;<a class=property
    href="#left">left</a>&rsquo; and &lsquo;<a class=property
    href="#right">right</a>&rsquo; are not &lsquo;<code
    class=css>auto</code>&rsquo;, then solve for &lsquo;<a class=property
    href="#width">width</a>&rsquo;.

   <li>&lsquo;<a class=property href="#right">right</a>&rsquo; is
    &lsquo;<code class=css>auto</code>&rsquo;, &lsquo;<a class=property
    href="#left">left</a>&rsquo; and &lsquo;<a class=property
    href="#width">width</a>&rsquo; are not &lsquo;<code
    class=css>auto</code>&rsquo;, then solve for &lsquo;<a class=property
    href="#right">right</a>&rsquo;.
  </ol>

  <p>This constraint must also hold among the used values:

  <blockquote>
   <p>&lsquo;<a class=property href="#top">top</a>&rsquo; + &lsquo;<a
    class=property href="#margin-top">margin-top</a>&rsquo; + &lsquo;<a
    class=property href="#border-top-width">border-top-width</a>&rsquo; +
    &lsquo;<a class=property href="#padding-top">padding-top</a>&rsquo; +
    &lsquo;<a class=property href="#height">height</a>&rsquo; + &lsquo;<a
    class=property href="#padding-bottom">padding-bottom</a>&rsquo; +
    &lsquo;<a class=property
    href="#border-bottom-width">border-bottom-width</a>&rsquo; + &lsquo;<a
    class=property href="#margin-bottom">margin-bottom</a>&rsquo; + &lsquo;<a
    class=property href="#bottom">bottom</a>&rsquo; + scrollbar height (if
    any) = height of containing block
  </blockquote>

  <p>If all three of &lsquo;<a class=property href="#top">top</a>&rsquo;,
   &lsquo;<a class=property href="#height">height</a>&rsquo;, and &lsquo;<a
   class=property href="#bottom">bottom</a>&rsquo; are &lsquo;<code
   class=css>auto</code>&rsquo;, set &lsquo;<a class=property
   href="#top">top</a>&rsquo; to the static position and apply rule number
   three below.

  <p>If none of the three are &lsquo;<code class=css>auto</code>&rsquo;: If
   both &lsquo;<a class=property href="#margin-top">margin-top</a>&rsquo; and
   &lsquo;<a class=property href="#margin-bottom">margin-bottom</a>&rsquo;
   are &lsquo;<code class=css>auto</code>&rsquo;, solve the equation under
   the extra constraint that the two margins get equal values. If one of
   &lsquo;<a class=property href="#margin-top">margin-top</a>&rsquo; or
   &lsquo;<a class=property href="#margin-bottom">margin-bottom</a>&rsquo; is
   &lsquo;<code class=css>auto</code>&rsquo;, solve the equation for that
   value. If the values are over-constrained, ignore the value for &lsquo;<a
   class=property href="#bottom">bottom</a>&rsquo; and solve for that value.

  <p>Otherwise, pick the one of the following six rules that applies.

  <ol>
   <li>&lsquo;<a class=property href="#top">top</a>&rsquo; and &lsquo;<a
    class=property href="#height">height</a>&rsquo; are &lsquo;<code
    class=css>auto</code>&rsquo; and &lsquo;<a class=property
    href="#bottom">bottom</a>&rsquo; is not &lsquo;<code
    class=css>auto</code>&rsquo;: The used value of &lsquo;<a class=property
    href="#bottom">bottom</a>&rsquo; is its computed value. The used height
    is defined by <a href="#root-height">“&lsquo;<code
    class=css>Auto</code>&rsquo; heights for flow roots.” </a> The used
    values of &lsquo;<a class=property
    href="#margin-top">margin-top</a>&rsquo; and &lsquo;<a class=property
    href="#margin-bottom">margin-bottom</a>&rsquo; are their computed values,
    except that any &lsquo;<code class=css>auto</code>&rsquo; gives a used
    value of 0. Finally, the constraint gives the used value of &lsquo;<a
    class=property href="#top">top</a>&rsquo;.

   <li>&lsquo;<a class=property href="#top">top</a>&rsquo; and &lsquo;<a
    class=property href="#bottom">bottom</a>&rsquo; are &lsquo;<code
    class=css>auto</code>&rsquo; and &lsquo;<a class=property
    href="#height">height</a>&rsquo; is not &lsquo;<code
    class=css>auto</code>&rsquo;: The used value of &lsquo;<a class=property
    href="#top">top</a>&rsquo; is its <em><a href="#static">static
    position.</a></em> The used values of &lsquo;<a class=property
    href="#margin-top">margin-top</a>&rsquo; and &lsquo;<a class=property
    href="#margin-bottom">margin-bottom</a>&rsquo; are their computed values,
    except that any &lsquo;<code class=css>auto</code>&rsquo; gives a used
    value of 0. Finally, the constraint gives the used value for &lsquo;<a
    class=property href="#bottom">bottom</a>&rsquo;.

   <li>&lsquo;<a class=property href="#height">height</a>&rsquo; and
    &lsquo;<a class=property href="#bottom">bottom</a>&rsquo; are
    &lsquo;<code class=css>auto</code>&rsquo; and &lsquo;<a class=property
    href="#top">top</a>&rsquo; is not &lsquo;<code
    class=css>auto</code>&rsquo;: The used height is defined by <a
    href="#root-height">“&lsquo;<code class=css>Auto</code>&rsquo; heights
    for flow roots.”</a> The used values of &lsquo;<a class=property
    href="#margin-top">margin-top</a>&rsquo; and &lsquo;<a class=property
    href="#margin-bottom">margin-bottom</a>&rsquo; are their computed values,
    except that any &lsquo;<code class=css>auto</code>&rsquo; gives a used
    value of 0. Finally, the constraint gives the used value of &lsquo;<a
    class=property href="#bottom">bottom</a>&rsquo;.

   <li>&lsquo;<a class=property href="#top">top</a>&rsquo; is &lsquo;<code
    class=css>auto</code>&rsquo;, &lsquo;<a class=property
    href="#height">height</a>&rsquo; and &lsquo;<a class=property
    href="#bottom">bottom</a>&rsquo; are not &lsquo;<code
    class=css>auto</code>&rsquo;: The used values of &lsquo;<a class=property
    href="#margin-top">margin-top</a>&rsquo; and &lsquo;<a class=property
    href="#margin-bottom">margin-bottom</a>&rsquo; are their computed values,
    except that any &lsquo;<code class=css>auto</code>&rsquo; gives a used
    value of 0. The constraint gives the used value for &lsquo;<a
    class=property href="#top">top</a>&rsquo;.

   <li>&lsquo;<a class=property href="#height">height</a>&rsquo; is
    &lsquo;<code class=css>auto</code>&rsquo;, &lsquo;<a class=property
    href="#top">top</a>&rsquo; and &lsquo;<a class=property
    href="#bottom">bottom</a>&rsquo; are not &lsquo;<code
    class=css>auto</code>&rsquo;: The used values of &lsquo;<a class=property
    href="#margin-top">margin-top</a>&rsquo; and &lsquo;<a class=property
    href="#margin-bottom">margin-bottom</a>&rsquo; are their computed values,
    except that any &lsquo;<code class=css>auto</code>&rsquo; gives a used
    value of 0. The constraint gives the used value for &lsquo;<a
    class=property href="#height">height</a>&rsquo;.

   <li>&lsquo;<a class=property href="#bottom">bottom</a>&rsquo; is
    &lsquo;<code class=css>auto</code>&rsquo;, &lsquo;<a class=property
    href="#top">top</a>&rsquo; and &lsquo;<a class=property
    href="#height">height</a>&rsquo; are not &lsquo;<code
    class=css>auto</code>&rsquo;: The used values of &lsquo;<a class=property
    href="#margin-top">margin-top</a>&rsquo; and &lsquo;<a class=property
    href="#margin-bottom">margin-bottom</a>&rsquo; are their computed values,
    except that any &lsquo;<code class=css>auto</code>&rsquo; gives a used
    value of 0. The constraint gives the used value for &lsquo;<a
    class=property href="#bottom">bottom</a>&rsquo;.
  </ol>

  <p>The “scrollbar height” and “scrollbar width” values are only
   relevant if the user agent uses a scrollbar as its scrolling mechanism.
   See the definition of the &lsquo;<a class=property
   href="#overflow0">overflow</a>&rsquo; property.

  <h3 id=abs-replaced><span class=secno>9.7. </span>Absolutely positioned,
   replaced elements</h3>

  <p>This situation is similar to the previous one, except that the element
   may have an intrinsic size or ratio. The sequence of substitutions is now:

  <ol>
   <li>The used value of &lsquo;<a class=property
    href="#width">width</a>&rsquo; and &lsquo;<a class=property
    href="#height">height</a>&rsquo; is determined as for <a
    href="#inline-replaced">inline replaced elements</a>.

   <li>For each of &lsquo;<a class=property href="#top">top</a>&rsquo;,
    &lsquo;<a class=property href="#right">right</a>&rsquo;, &lsquo;<a
    class=property href="#bottom">bottom</a>&rsquo;, &lsquo;<a class=property
    href="#left">left</a>&rsquo;, &lsquo;<a class=property
    href="#margin-top">margin-top</a>&rsquo;, &lsquo;<a class=property
    href="#margin-right">margin-right</a>&rsquo;, &lsquo;<a class=property
    href="#margin-bottom">margin-bottom</a>&rsquo; and &lsquo;<a
    class=property href="#margin-left">margin-left</a>&rsquo;, if the
    computed value is not &lsquo;<code class=css>auto</code>&rsquo;, the used
    value is equal to the computed value.

   <li>If both &lsquo;<a class=property href="#left">left</a>&rsquo; and
    &lsquo;<a class=property href="#right">right</a>&rsquo; have the value
    &lsquo;<code class=css>auto</code>&rsquo;, then if &lsquo;<a
    class=property href="#direction">direction</a>&rsquo; of the containing
    block is &lsquo;<code class=css>ltr</code>&rsquo;, the used value of
    &lsquo;<a class=property href="#left">left</a>&rsquo; is its <em><a
    href="#static">static position;</a></em> else if &lsquo;<a class=property
    href="#direction">direction</a>&rsquo; is &lsquo;<code
    class=css>rtl</code>&rsquo;, the used value of &lsquo;<a class=property
    href="#right">right</a>&rsquo; is its <em><a href="#static">static
    position.</a></em>

   <li>If both &lsquo;<a class=property href="#top">top</a>&rsquo; and
    &lsquo;<a class=property href="#bottom">bottom</a>&rsquo; have the value
    &lsquo;<code class=css>auto</code>&rsquo;, then the used value of
    &lsquo;<a class=property href="#top">top</a>&rsquo; is its <em><a
    href="#static">static position.</a></em>

   <li>If &lsquo;<a class=property href="#left">left</a>&rsquo; or &lsquo;<a
    class=property href="#right">right</a>&rsquo; (or both) are &lsquo;<code
    class=css>auto</code>&rsquo;, and &lsquo;<a class=property
    href="#margin-left">margin-left</a>&rsquo; is &lsquo;<code
    class=css>auto</code>&rsquo;, then the used value of &lsquo;<a
    class=property href="#margin-left">margin-left</a>&rsquo; is 0.

   <li>If &lsquo;<a class=property href="#left">left</a>&rsquo; or &lsquo;<a
    class=property href="#right">right</a>&rsquo; (or both) are &lsquo;<code
    class=css>auto</code>&rsquo;, and &lsquo;<a class=property
    href="#margin-right">margin-right</a>&rsquo; is &lsquo;<code
    class=css>auto</code>&rsquo;, then the used value of &lsquo;<a
    class=property href="#margin-right">margin-right</a>&rsquo; is 0.

   <li>If neither &lsquo;<a class=property href="#left">left</a>&rsquo; nor
    &lsquo;<a class=property href="#right">right</a>&rsquo; are &lsquo;<code
    class=css>auto</code>&rsquo; and both &lsquo;<a class=property
    href="#margin-left">margin-left</a>&rsquo; and &lsquo;<a class=property
    href="#margin-right">margin-right</a>&rsquo; are &lsquo;<code
    class=css>auto</code>&rsquo;, then the used values satisfy the extra
    constraint that &lsquo;<a class=property
    href="#margin-right">margin-right</a>&rsquo; and &lsquo;<a class=property
    href="#margin-left">margin-left</a>&rsquo; are equal, unless this would
    make them negative, in which case when the direction of the containing
    block is &lsquo;<code class=css>ltr</code>&rsquo; (&lsquo;<code
    class=css>rtl</code>&rsquo;), the used value of &lsquo;<a class=property
    href="#margin-left">margin-left</a>&rsquo; (&lsquo;<a class=property
    href="#margin-right">margin-right</a>&rsquo;) is 0. <span
    class=issue>Remove the part starting with “unless”? It looks better
    to center the image.</span>
  </ol>

  <p>The remaining used values, if any, follows from these two constraints:

  <blockquote>
   <p>&lsquo;<a class=property href="#left">left</a>&rsquo; + &lsquo;<a
    class=property href="#margin-left">margin-left</a>&rsquo; + &lsquo;<a
    class=property href="#border-left-width">border-left-width</a>&rsquo; +
    &lsquo;<a class=property href="#padding-left">padding-left</a>&rsquo; +
    &lsquo;<a class=property href="#width">width</a>&rsquo; + &lsquo;<a
    class=property href="#padding-right">padding-right</a>&rsquo; + &lsquo;<a
    class=property href="#border-right-width">border-right-width</a>&rsquo; +
    &lsquo;<a class=property href="#margin-right">margin-right</a>&rsquo; +
    &lsquo;<a class=property href="#right">right</a>&rsquo; + scrollbar width
    (if any) = width of containing block

   <p>&lsquo;<a class=property href="#top">top</a>&rsquo; + &lsquo;<a
    class=property href="#margin-top">margin-top</a>&rsquo; + &lsquo;<a
    class=property href="#border-top-width">border-top-width</a>&rsquo; +
    &lsquo;<a class=property href="#padding-top">padding-top</a>&rsquo; +
    &lsquo;<a class=property href="#height">height</a>&rsquo; + &lsquo;<a
    class=property href="#padding-bottom">padding-bottom</a>&rsquo; +
    &lsquo;<a class=property
    href="#border-bottom-width">border-bottom-width</a>&rsquo; + &lsquo;<a
    class=property href="#margin-bottom">margin-bottom</a>&rsquo; + &lsquo;<a
    class=property href="#bottom">bottom</a>&rsquo; + scrollbar height (if
    any) = height of containing block
  </blockquote>

  <p>If the first equation is over-constrained, ignore the value for either
   &lsquo;<a class=property href="#left">left</a>&rsquo; (in case the
   &lsquo;<a class=property href="#direction">direction</a>&rsquo; property
   of the containing block is &lsquo;<code class=css>rtl</code>&rsquo;) or
   &lsquo;<a class=property href="#right">right</a>&rsquo; (in case &lsquo;<a
   class=property href="#direction">direction</a>&rsquo; is &lsquo;<code
   class=css>ltr</code>&rsquo;) and solve for that value.

  <p>If the second equation is over-constrained, ignore the value for
   &lsquo;<a class=property href="#bottom">bottom</a>&rsquo; and solve for
   that value.

  <h3 id=block-level1><span class=secno>9.8. </span>Block-level, replaced
   elements in normal flow</h3>

  <p>Apply the rules for <a href="#inline-replaced">inline replaced
   elements</a>, but ignore the resulting values for &lsquo;<a class=property
   href="#margin-left">margin-left</a>&rsquo; and &lsquo;<a class=property
   href="#margin-right">margin-right</a>&rsquo;. To compute the used value of
   those, apply the rules for <a href="#blockwidth">block-level, non-replaced
   elements</a> using the used values just found for &lsquo;<a class=property
   href="#width">width</a>&rsquo;, &lsquo;<a class=property
   href="#border1">border</a>&rsquo; and &lsquo;<a class=property
   href="#padding1">padding</a>&rsquo; as if they were the computed values.

  <h3 id=floating><span class=secno>9.9. </span>Floating, non-replaced
   elements</h3>

  <p>The used values of the margins are equal to the computed values, except
   that the used values of any margins computed as &lsquo;<code
   class=css>auto</code>&rsquo; are &lsquo;<code class=css>0</code>&rsquo;.

  <p>The used value of &lsquo;<a class=property
   href="#width">width</a>&rsquo; is equal to the computed value, except that
   if &lsquo;<a class=property href="#width">width</a>&rsquo; is computed as
   &lsquo;<code class=css>auto</code>&rsquo;, the used value is the <em><a
   href="#shrink-to-fit0">shrink-to-fit</a></em> width.

  <p>If the computed value of &lsquo;<a class=property
   href="#height">height</a>&rsquo; is not &lsquo;<code
   class=css>auto</code>&rsquo;, the used value is the computed value.
   Otherwise the used height depends on the descendants, as defined in <a
   href="#root-height">“&lsquo;<code class=css>Auto</code>&rsquo; heights
   for flow roots.”</a>

  <h3 id=root-height><span class=secno>9.10. </span>&lsquo;<code
   class=css>Auto</code>&rsquo; heights for flow roots</h3>

  <p>In certain cases (see the preceding sections), the height of an element
   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>If it has <a href="#block-level">block-level</a> 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>Absolutely positioned children are ignored, and relatively positioned
   boxes are considered without their offset. Note that the child box may be
   an <em>anonymous block box.</em>

  <p>In addition, if the element has any floating descendants whose bottom
   margin edge is below the bottom, then the height is increased to include
   those edges. Only floats that are children of the element itself or of
   descendants in the normal flow are taken into account, e.g., floats inside
   absolutely positioned descendants or other floats are not.

  <h3 id=shrink-to-fit><span class=secno>9.11. </span>Shrink-to-fit</h3>

  <p>Calculation of the <dfn id=shrink-to-fit0>shrink-to-fit</dfn> 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 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 &lsquo;<a
   class=property href="#margin-left">margin-left</a>&rsquo;, &lsquo;<a
   class=property href="#border-left-width">border-left-width</a>&rsquo;,
   &lsquo;<a class=property href="#padding-left">padding-left</a>&rsquo;,
   &lsquo;<a class=property href="#padding-right">padding-right</a>&rsquo;,
   &lsquo;<a class=property
   href="#border-right-width">border-right-width</a>&rsquo;, &lsquo;<a
   class=property href="#margin-right">margin-right</a>&rsquo;, and the
   widths of any relevant scroll bars.

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

  <p class=issue>Define in more detail, using a text by David Baron.

  <h2 id=floating0><span class=secno>10. </span>Floating boxes</h2>

  <h3 id=introduction0><span class=secno>10.1. </span>Introduction to floats</h3>

  <p>(This section is not normative.)

  <p>A float is a box that is shifted to the left or right on the current
   line. The most interesting characteristic of a float (or “floating”
   box) is that content may flow along its side (or be prohibited from doing
   so by the &lsquo;<a class=property href="#clear">clear</a>&rsquo;
   property). Content flows down the right side of a left-floated box and
   down the left side of a right-floated box. The following is a
   (non-normative) introduction to float positioning and content flow; the
   exact rules governing float positioning are given in the next section.

  <p>A floated box is shifted to the left or right until its outer edge
   touches the containing block edge or the outer edge of another float. If
   there is a line box, the top of the floated box is aligned with the top of
   the current line box.

  <p>If there isn't enough horizontal room for the float, it is shifted
   downward until either it fits or there are no more floats present.

  <p>Since a float is not in the flow, non-positioned block boxes created
   before and after the float box flow vertically as if the float didn't
   exist. However, <em>line boxes</em> created next to the float are
   shortened to make room for the margin box of the float. If a shortened
   line box is too small to contain any further content, then it is shifted
   downward until either it fits or there are no more floats present. Any
   content in the current line before a floated box is re-flowed in the first
   available line on the other side of the float. In other words, if inline
   boxes are placed on the line before a left float is encountered that fits
   in the remaining line box space, the left float is placed on that line,
   aligned with the top of the line box, and then the inline boxes already on
   the line are moved accordingly to the right of the float (the right being
   the other side of the left float) and vice versa for rtl and right floats.

  <div class=example>
   <p>In the following document fragment, the containing block is too narrow
    to contain the content next to the float, so the content gets moved to
    below the floats where it is aligned in the line box according to the
    text-align property.</p>

   <pre>
p { width: 10em; border: solid aqua; }
span { float: left; width: 5em; height: 5em; border: solid blue; }

...

&lt;p&gt;
  &lt;span&gt; &lt;/span&gt;
  Supercalifragilisticexpialidocious
&lt;/p&gt;
</pre>

   <p>This fragment might look like this:</p>

   <div class=figure>
    <p><img alt="Image illustrating the effect of an unbreakable piece of
     content being reflowed to just after a float which left insufficient
     room next to it for the content to fit." src=supercal.png></p>

    <p class=caption>The text is too long to fit in a shortened line box next
     to the float (dark blue box) and so it is pushed down until it is passed
     the float.</p>
   </div>
  </div>

  <p>Several floats may be adjacent, and this model also applies to adjacent
   floats in the same line.

  <div class=example>
   <p>The following rule floats all IMG boxes with <code>class="icon"</code>
    to the left (and sets the left margin to &lsquo;<code
    class=css>0</code>&rsquo;):</p>

   <pre>
img.icon {
  float: left;
  margin-left: 0;
}
</pre>
  </div>

  <div class=example>
   <p>Consider the following HTML source and style sheet:</p>

   <pre>
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"&gt;
&lt;HTML&gt;
  &lt;HEAD&gt;
    &lt;TITLE&gt;Float example&lt;/TITLE&gt;
    &lt;STYLE type="text/css"&gt;
      IMG { float: left }
      BODY, P, IMG { margin: 2em }
    &lt;/STYLE&gt;
  &lt;/HEAD&gt;
  &lt;BODY&gt;
    &lt;P&gt;&lt;IMG src=img.png alt="This image will illustrate floats"&gt;
       Some sample text that has no other...
  &lt;/BODY&gt;
&lt;/HTML&gt;
</pre>

   <p>The IMG box is floated to the left. The content that follows is
    formatted to the right of the float, starting on the same line as the
    float. The line boxes to the right of the float are shortened due to the
    float's presence, but resume their “normal” width (that of the
    containing block established by the P element) after the float. This
    document might be formatted as:</p>

   <div class=figure>
    <p><img alt="Image illustrating how floating boxes interact with
     margins." src=floateg.png></p>

    <p class=caption>An image showing the various margins of the BODY, P and
     IMG element. Not that the top margin of the floating IMG does not
     collapse with the top margins of the P and BODY elements.</p>
   </div>

   <p>Formatting would have been exactly the same if the document had been:</p>

   <pre>
&lt;BODY&gt;
  &lt;P&gt;Some sample text
  &lt;IMG src=img.png alt="This image will illustrate floats"&gt;
           that has no other...
&lt;/BODY&gt;
</pre>

   <p>because the content to the left of the float is displaced by the float
    and re-flowed down its right side.</p>
  </div>

  <p>As stated in <a href="#collapsing-margins">“Collapsing margins,”
   </a> the margins of floating boxes never <em><a
   href="#collapse">collapse</a></em> with margins of adjacent boxes. Thus,
   in the previous example, vertical margins do not collapse between the P
   box and the floated IMG box.

  <p>The contents of floats are stacked as if floats generated new stacking
   contexts, except that any elements that actually create new stacking
   contexts take part in the float's parent's stacking context. A float can
   overlap other boxes in the normal flow (e.g., when a normal flow box next
   to a float has negative margins). When this happens, floats are rendered
   in front of non-positioned in-flow blocks, but behind in-flow inlines.

  <div class=example>
   <p>Here is another illustration, showing what happens when a float
    overlaps borders of elements in the normal flow.</p>

   <div class=figure>
    <p><img alt="Image showing a floating image that overlaps the borders of
     two paragraphs: the borders are interrupted by the image."
     src=float2p.png></p>

    <p class=caption>A floating image obscures borders of block boxes it
     overlaps.</p>
   </div>
  </div>

  <p>The following example illustrates the use of the &lsquo;<a
   class=property href="#clear">clear</a>&rsquo; property to prevent content
   from flowing next to a float.

  <div class=example>
   <p>Assuming a rule such as this:</p>

   <pre>
p { clear: left }
</pre>

   <p>formatting might look like this:</p>

   <div class=figure>
    <p><img alt="Image showing a floating image and the effect of 'clear:
     left' on the two paragraphs." src=floatclear.png></p>

    <p class=caption>Both paragraphs have set &lsquo;<code class=css>clear:
     left</code>&rsquo;, which causes the second paragraph to be “pushed
     down” to a position below the float &ndash; “clearance” is added
     above its top margin to accomplish this (see the &lsquo;<a
     class=property href="#clear">clear</a>&rsquo; property).</p>
   </div>
  </div>

  <h3 id=the-lsquo1><span class=secno>10.2. </span>The &lsquo;<a
   class=property href="#float">float</a>&rsquo; property</h3>

  <table class=propdef id=namefloat>
   <tbody>
    <tr>
     <td>Name:

     <td><dfn id=float>float</dfn>

    <tr>
     <td>Value:

     <td>left | right | none | <var><a
      href="#ltpage-floatsgt">&lt;page-floats&gt;</a></var>

    <tr>
     <td>Initial:

     <td>none

    <tr>
     <td>Applies to:

     <td>all, but see 9.7

    <tr>
     <td>Inherited:

     <td>no

    <tr>
     <td>Percentages:

     <td>N/A

    <tr>
     <td>Media:

     <td>visual

    <tr>
     <td>Computed value:

     <td>as specified
  </table>

  <p>This property specifies whether a box should float to the left, right,
   or not at all. It may be set for any element, but only applies to elements
   that generate boxes that are not absolutely positioned. The values of this
   property have the following meanings:

  <dl>
   <dt><dfn id=left>left</dfn>

   <dd>...

   <dt><dfn id=right>right</dfn>

   <dd>...

   <dt><dfn id=none0>none</dfn>

   <dd>...

   <dt><dfn id=ltpage-floatsgt><var>&lt;page-floats&gt;</var></dfn>

   <dd>See Generated Content for Paged Media <a href="#CSS3GCPM"
    rel=biblioentry>[CSS3GCPM]<!--{{CSS3GCPM}}--></a>.
  </dl>

  <h3 id=rules><span class=secno>10.3. </span>Rules for positioning floats</h3>

  <p class=issue>[To do: copy from CSS2 <a href="#CSS21"
   rel=biblioentry>[CSS21]<!--{{CSS21}}--></a> and generalize to vertical
   text]

  <p class=note>Note that a box with a value of &lsquo;<a class=property
   href="#float">float</a>&rsquo; other than &lsquo;<code class=css><a
   href="#none0">none</a></code>&rsquo; is a <em><a href="#flow-root">flow
   root.</a></em>

  <p>The border box of a table, a <a href="#block-level">block-level</a>
   replaced element, or an element in the normal flow that is a <em><a
   href="#flow-root">flow root</a></em> (such as an element with &lsquo;<a
   class=property href="#overflow0">overflow</a>&rsquo; other than
   &lsquo;<code class=css><a href="#visible0">visible</a></code>&rsquo;) must
   not overlap any floats in the same flow as the element itself. If
   necessary, implementations should clear the said element by placing it
   below any preceding floats, but may place it adjacent to such floats if
   there is sufficient space, <span class=issue>by increasing one margin and
   decreasing the opposite margin. (“Sufficient space” means that the
   opposite margin does not become negative.)</span>

  <h3 id=the-lsquo2><span class=secno>10.4. </span>The &lsquo;<a
   class=property href="#clear">clear</a>&rsquo; property</h3>

  <table class=propdef id=nameclear>
   <tbody>
    <tr>
     <td>Name:

     <td><dfn id=clear>clear</dfn>

    <tr>
     <td>Value:

     <td>none | left | right | both

    <tr>
     <td>Initial:

     <td>none

    <tr>
     <td>Applies to:

     <td><a href="#block-level">block-level</a> elements

    <tr>
     <td>Inherited:

     <td>no

    <tr>
     <td>Percentages:

     <td>N/A

    <tr>
     <td>Media:

     <td>visual

    <tr>
     <td>Computed value:

     <td>as specified
  </table>

  <p class=issue>[To do: copy from CSS2 <a href="#CSS21"
   rel=biblioentry>[CSS21]<!--{{CSS21}}--></a> and generalize to vertical
   text]

  <h2 id=overflow1><span class=secno>11. </span>Overflow</h2>

  <h3 id=overflow><span class=secno>11.1. </span>The &lsquo;<a class=property
   href="#overflow0">overflow</a>&rsquo;, &lsquo;<a class=property
   href="#overflow-x">overflow-x</a>&rsquo; and &lsquo;<a class=property
   href="#overflow-y">overflow-y</a>&rsquo; properties</h3>

  <p class=issue>In the preceding sections, several things (such as flow
   roots) depend on the value of &lsquo;<a class=property
   href="#overflow0">overflow</a>&rsquo;. We probably need to rewrite them in
   terms of “overflow-x and/or -y” or similar.

  <table class=propdef id=nameoverflow-x>
   <tbody>
    <tr>
     <td>Name:

     <td><dfn id=overflow-x>overflow-x</dfn>, <dfn
      id=overflow-y>overflow-y</dfn>,

    <tr>
     <td>Value:

     <td>visible | hidden | scroll | auto | no-display | no-content

    <tr>
     <td>Initial:

     <td>visible

    <tr>
     <td>Applies to:

     <td>non-replaced <em><a href="#block-level">block-level</a></em>
      elements and non-replaced &lsquo;<code class=css><a
      href="#inline-block">inline-block</a></code>&rsquo; elements

    <tr>
     <td>Inherited:

     <td>no

    <tr>
     <td>Percentages:

     <td>N/A

    <tr>
     <td>Media:

     <td>visual

    <tr>
     <td>Computed value:

     <td>as specified, except &lsquo;<a class=property
      href="#visible0">visible</a>&rsquo;, see text
  </table>

  <table class=propdef id=nameoverflow>
   <tbody>
    <tr>
     <td>Name:

     <td><dfn id=overflow0>overflow</dfn>

    <tr>
     <td>Value:

     <td>[ visible | hidden | scroll | auto | no-display | no-content ]{1,2}

    <tr>
     <td>Initial:

     <td>see individual properties

    <tr>
     <td>Applies to:

     <td>non-replaced <em><a href="#block-level">block-level</a></em>
      elements and non-replaced &lsquo;<code class=css><a
      href="#inline-block">inline-block</a></code>&rsquo; elements

    <tr>
     <td>Inherited:

     <td>no

    <tr>
     <td>Percentages:

     <td>N/A

    <tr>
     <td>Media:

     <td>visual

    <tr>
     <td>Computed value:

     <td>as specified, except &lsquo;<a class=property
      href="#visible0">visible</a>&rsquo;, see text
  </table>

  <p>These properties specify whether content is clipped when it overflows
   the element's <em><a href="#content">content area.</a></em> It affects the
   clipping of all of the element's content except any descendant elements
   (and their respective content and descendants) whose containing block is
   the viewport or an ancestor of the element. &lsquo;<a class=property
   href="#overflow-x">Overflow-x</a>&rsquo; determines clipping at the left
   and right edges, &lsquo;<a class=property
   href="#overflow-y">overflow-y</a>&rsquo; at the top and bottom edges.

  <p>&lsquo;<a class=property href="#overflow0">Overflow</a>&rsquo; is a
   shorthand. If it has one keyword, it sets both &lsquo;<a class=property
   href="#overflow-x">overflow-x</a>&rsquo; and &lsquo;<a class=property
   href="#overflow-y">overflow-y</a>&rsquo; to that keyword; if it has two,
   it sets &lsquo;<a class=property href="#overflow-x">overflow-x</a>&rsquo;
   to the first and &lsquo;<a class=property
   href="#overflow-y">overflow-y</a>&rsquo; to the second. Keywords have the
   following meanings:

  <dl>
   <dt><dfn id=visible>visible</dfn>

   <dd>This value indicates that content is not clipped, i.e., it may be
    rendered outside the content box.

   <dt><dfn id=hidden>hidden</dfn>

   <dd>This value indicates that the content is clipped and that no <em><a
    href="#scrolling">scrolling mechanism</a></em> should be provided to view
    the content outside the clipping region.

   <dt><dfn id=scroll>scroll</dfn>

   <dd>This value indicates that the content is clipped and that if the user
    agent uses a <em><a href="#scrolling">scrolling mechanism</a></em> that
    is visible on the screen (such as a scroll bar or a panner), that
    mechanism should be displayed for a box whether or not any of its content
    is clipped. This avoids any problem with scrollbars appearing and
    disappearing in a dynamic environment. When this value is specified and
    the target medium is &lsquo;<span class=property>print</span>&rsquo;,
    overflowing content may be printed.

   <dt><dfn id=auto title="auto!!value of 'overflow'">auto</dfn>

   <dd>The behavior of the &lsquo;<code class=css>auto</code>&rsquo; value is
    UA-dependent, but should cause a <em><a href="#scrolling">scrolling
    mechanism</a></em> to be provided for overflowing boxes.

   <dt class=issue><dfn id=no-display>no-display</dfn>

   <dd class=issue>When the content doesn't fit in the content box, the whole
    box is removed, as if &lsquo;<code class=css>display: none</code>&rsquo;
    were specified. [This idea is due to Till Halbach
    &lt;tillh@opera.com&gt;, July 21, 2005]

   <dt class=issue><dfn id=no-content>no-content</dfn>

   <dd class=issue>When the content doesn't fit in the content box, the whole
    content is hidden, as if &lsquo;<code class=css>visibility:
    hidden</code>&rsquo; were specified. [This idea is due to Till Halbach
    &lt;tillh@opera.com&gt;, July 21, 2005]
  </dl>

  <p>Even if &lsquo;<a class=property href="#overflow0">overflow</a>&rsquo;
   is set to &lsquo;<code class=css><a
   href="#visible0">visible</a></code>&rsquo;, content may be clipped to a
   UA's document window by the native operating environment.

  <p>UAs must apply the &lsquo;<a class=property
   href="#overflow0">overflow</a>&rsquo; property set on the root element to
   the viewport. HTML UAs must instead apply the &lsquo;<a class=property
   href="#overflow0">overflow</a>&rsquo; property from the BODY element to
   the viewport, if the value on the HTML element is &lsquo;<code
   class=css><a href="#visible0">visible</a></code>&rsquo;. The &lsquo;<code
   class=css><a href="#visible0">visible</a></code>&rsquo; value when used
   for the viewport must be interpreted as &lsquo;<code
   class=css>auto</code>&rsquo;. The element from which the value is
   propagated must have a used value for &lsquo;<a class=property
   href="#overflow0">overflow</a>&rsquo; of &lsquo;<code class=css><a
   href="#visible0">visible</a></code>&rsquo;.

  <p class=issue>The para above is from CSS 2.1. Need to check if the
   introduction of overflow-x/y changes anything.

  <p>In the case of a scrollbar being placed on an edge of the element's box,
   it should be inserted between the inner border edge and the outer padding
   edge. The space taken up by the scrollbars affects the computation of the
   dimensions in the rendering model.

  <p>A UA may use multiple scrolling mechanisms at the same time. E.g., if
   content overflows both to the right and to the bottom, it may use a
   marquee effect for the overflow to the right and a scrollbar for the
   overflow to the bottom.

  <p class=note>Note that a box with &lsquo;<a class=property
   href="#overflow0">overflow</a>&rsquo; other than &lsquo;<code class=css><a
   href="#visible0">visible</a></code>&rsquo; is a <em><a
   href="#flow-root">flow root.</a></em>

  <div class=example>
   <p>Consider the following example of a block quotation (&lt;blockquote>)
    that is too big for its containing block (established by a &lt;div>).
    Here is the source:</p>

   <pre>
&lt;div>
&lt;blockquote>
&lt;p>I didn't like the play, but then I saw
it under adverse conditions - the curtain was up.&lt;/p>
&lt;cite>- Groucho Marx&lt;/cite>
&lt;/blockquote>
&lt;/div>
</pre>

   <p>Here is the style sheet controlling the sizes and style of the
    generated boxes:</p>

   <pre>
div { width : 100px; height: 100px;
      border: thin solid red;
      }

blockquote   { width : 125px; height : 100px;
      margin-top: 50px; margin-left: 50px;
      border: thin dashed black
      }

cite { display: block;
       text-align : right;
       border: none
       }
</pre>

   <p>The initial value of &lsquo;<a class=property
    href="#overflow0">overflow</a>&rsquo; is &lsquo;<code class=css><a
    href="#visible0">visible</a></code>&rsquo;, so the &lt;blockquote> would
    be formatted without clipping, something like this:</p>

   <div class=figure>
    <p><img alt="[image: Rendered overflow]" src=overflow1></p>

    <p class=caption>Possible rendering with &lsquo;<code class=css>overflow:
     visible</code>&rsquo;</p>
   </div>

   <p>Setting &lsquo;<a class=property href="#overflow0">overflow</a>&rsquo;
    to &lsquo;<code class=css><a href="#hidden0">hidden</a></code>&rsquo; for
    the &lt;div>, on the other hand, causes the &lt;blockquote> to be clipped
    by the containing block:</p>

   <div class=figure>
    <p><img alt="[image: Rendered overflow]" src=overflow2></p>

    <p class=caption>Possible rendering with &lsquo;<code class=css>overflow:
     hidden</code>&rsquo;</p>
   </div>

   <p>A value of &lsquo;<a class=property href="#scroll">scroll</a>&rsquo;
    would tell UAs that support a visible scrolling mechanism to display one
    so that users could access the clipped content.</p>
  </div>

  <div class=example>
   <p>Consider this case where an absolutely positioned element is mixed with
    an overflow parent. Style sheet:</p>

   <pre>
container { position: relative; border: solid; }
scroller { overflow: scroll; height: 5em; margin: 5em; }
satellite { position: absolute; top: 0; }
body { height: 10em; }
</pre>

   <p>Document fragment:</p>

   <pre>
&lt;container>
 &lt;scroller>
  &lt;satellite/>
  &lt;body/>
 &lt;/scroller>
&lt;/container>
</pre>

   <p>In this example, the “scroller” element will not scroll the
    “satellite” element, because the latter's containing block is outside
    the element whose overflow is being clipped and scrolled.</p>
  </div>

  <p id=collapse-scroll>The combination of collapsing margins, &lsquo;<a
   class=property href="#max-height">max-height</a>&rsquo; and &lsquo;<code
   class=css>overflow: auto</code>&rsquo; can lead to subtle differences in
   implementations, unless special care is taken. A UA should assume that an
   element can be rendered <em>without</em> a scrolling mechanism first,
   perform all the collapsing of margins, and check that the content height
   is indeed less than the &lsquo;<a class=property
   href="#max-height">max-height</a>&rsquo;. If it is not, the process is
   repeated under the assumption that a scrolling mechanism <em>is</em>
   needed.

  <div class=example>
   <p>In the following document fragment, the outer DIV has &lsquo;<code
    class=css>height: auto</code>&rsquo;, but &lsquo;<code
    class=css>max-height: 5em</code>&rsquo;. The inner DIV has large margins
    and would normally just fit:</p>

   <pre>
...
    #d1 { overflow: auto; max-height: 5em }
    #d2 { margin: 2em; line-height: 1 }
...
&lt;div id=d1&gt;
  &lt;div id=d2&gt;
    This DIV has big margins.
  &lt;/DIV&gt;
&lt;/DIV&gt;
</pre>

   <p>If we assume that d1 needs scroll bars, then the height of d1,
    including the single line of text and twice 2em of margins, adds up to
    5em plus a scrollbar. Since that is greater than 5em, the maximum allowed
    height, it seems we made the right assumption and d1 indeed needs
    scrollbars.</p>

   <p>However, we should have started by assuming that no scrollbars are
    needed. In that case the content height of d1 is exactly the maximum
    height of 5em, proving that the assumption was correct and d1 indeed
    should not have scrollbars.</p>
  </div>

  <p>The computed values of &lsquo;<a class=property
   href="#overflow-x">overflow-x</a>&rsquo; and &lsquo;<a class=property
   href="#overflow-y">overflow-y</a>&rsquo; are the same as their specified
   values, except that some combinations with &lsquo;<a class=property
   href="#visible0">visible</a>&rsquo; are not possible: if one is specified
   as &lsquo;<a class=property href="#visible0">visible</a>&rsquo; and the
   other is &lsquo;<a class=property href="#scroll">scroll</a>&rsquo; or
   &lsquo;<span class=property>auto</span>&rsquo;, then &lsquo;<a
   class=property href="#visible0">visible</a>&rsquo; is set to &lsquo;<span
   class=property>auto</span>&rsquo;. <span class=issue>The computed value of
   &lsquo;<a class=property href="#overflow0">overflow</a>&rsquo; is equal to
   the computed value of &lsquo;<a class=property
   href="#overflow-x">overflow-x</a>&rsquo; if &lsquo;<a class=property
   href="#overflow-y">overflow-y</a>&rsquo; is the same; otherwise it is the
   pair of computed values of &lsquo;<a class=property
   href="#overflow-x">overflow-x</a>&rsquo; and &lsquo;<a class=property
   href="#overflow-y">overflow-y</a>&rsquo;.</span>

  <p>The <dfn id=scrolling>scrolling mechanism</dfn> depends on the UA. The
   most common mechanism is a scrollbar, but panners, hand cursors, page
   flickers, etc. are also possible. A value of &lsquo;<a class=property
   href="#scroll">scroll</a>&rsquo; would tell UAs that support a visible
   scrolling mechanism to display one so that users can access the clipped
   content. The &lsquo;<a class=property
   href="#overflow-style">overflow-style</a>&rsquo; property lets an author
   specify one or more preferred scrolling mechanism.

  <p class=note>Note that &lsquo;<a class=property
   href="#overflow-x">overflow-x</a>&rsquo; and &lsquo;<a class=property
   href="#overflow-y">overflow-y</a>&rsquo; did not exist in CSS2.

  <p class=note>Note that &lsquo;<span
   class=property>text-overflow</span>&rsquo; (see <a href="#CSS3TEXT"
   rel=biblioentry>[CSS3TEXT]<!--{{!CSS3TEXT}}--></a>) can be used to give a
   visual indication where text has been clipped.

  <h3 id=the-lsquo3><span class=secno>11.2. </span>The &lsquo;<a
   class=property href="#overflow-style">overflow-style</a>&rsquo; property</h3>

  <table class=propdef id=nameoverflow-style>
   <tbody>
    <tr>
     <td>Name:

     <td><dfn id=overflow-style>overflow-style</dfn>

    <tr>
     <td>Value:

     <td>auto | [scrollbar | panner | move | marquee] [, [scrollbar | panner
      | move | marquee]]*

    <tr>
     <td>Initial:

     <td>auto

    <tr>
     <td>Applies to:

     <td>same as &lsquo;<a class=property
      href="#overflow0">overflow</a>&rsquo;

    <tr>
     <td>Inherited:

     <td>yes

    <tr>
     <td>Percentages:

     <td>N/A

    <tr>
     <td>Media:

     <td>visual

    <tr>
     <td>Computed value:

     <td>as specified
  </table>

  <p>This property specifies the preferred scrolling methods for elements
   that overflow (see the &lsquo;<a class=property
   href="#overflow0">overflow</a>&rsquo; property.) The value is either
   &lsquo;<code class=css>auto</code>&rsquo;, meaning no preference, or a
   list of methods in order of preference. The UA should use the first
   scrolling method in the list that it supports. If it supports none of
   them, it must act as if the value was &lsquo;<code
   class=css>auto</code>&rsquo;.

  <p>A UA that support a certain scrolling mechanism may be able to support
   it only in certain cases. E.g., a UA may be able to use the marquee effect
   only in the horizontal direction (or the line progression direction), or
   it may be able to use a panner only if none of the ancestor boxes uses a
   panner.

  <dl>
   <dt>scrollbar

   <dd>Scrollbars are typically narrow strips inserted on one or two edges of
    an element and which often have arrows to click on and a
    &ldquo;thumb&rdquo; to drag up and down (or left and right) to move the
    contents of the element.

   <dt>panner

   <dd>A panner is typically a rectangle shown in one corner of the element,
    with a smaller rectangle inside. The larger rectangle represents all the
    available content of the element and the smaller one the visible part.
    The smaller rectangle can be moved around by the user to move the content
    of the element accordingly.

   <dt>move

   <dd>The value &lsquo;<code class=css>move</code>&rsquo; refers to a method
    where the user can move the content of the element directly (rather than
    indirectly by moving a scrollbar or a panner). Typically, the mouse
    pointer changes into a hand or a cross of four arrows to indicate that
    the user can drag the content around with the mouse. Sometimes the user
    needs to explicitly activate the move mode and in that case he often can
    use both dragging (with the mouse) and key events to move the content.

   <dt>marquee

   <dd>The marquee effect (value &lsquo;<code
    class=css>marquee</code>&rsquo;) consists of the content moving
    autonomously, without any user events to control it. A user who waits
    long enough will eventually see all the content that overflows.
  </dl>

  <p>This specification does not define what scrollbars, panners or the
   visual indicators for the &lsquo;<code class=css>move</code>&rsquo; method
   look like. The &lsquo;<code class=css>marquee</code>&rsquo; method is
   further defined <a href="#marquee">below.</a>

  <p class=issue>Another idea is to make &lsquo;<a class=property
   href="#overflow0">overflow</a>&rsquo; a shorthand for &lsquo;<a
   class=property href="#overflow-style">overflow-style</a>&rsquo; and
   overflow-policy, where overflow-policy has syntax “visible | hidden |
   scroll | auto” and &lsquo;<a class=property
   href="#overflow0">overflow</a>&rsquo; has “&lt;&lsquo;<span
   class=property>overflow-policy</span>&rsquo;&gt; || &lt;&lsquo;<a
   class=property href="#overflow-style">overflow-style</a>&rsquo;&gt;”.
   Then it is possible to write, e.g., &lsquo;<code class=css>overflow: auto
   marquee, scrollbar</code>&rsquo;.

  <div class=issue>
   <p>We will probably want to introduce overflow-x and overflow-y in CSS3 to
    separate the policy in the two directions. In that case we may want:</p>

   <ul>
    <li>overflow-style-x: auto | [scrollbar | panner | move | marquee] [,
     &hellip;]*

    <li>overflow-style-y ditto

    <li>overflow-policy-x: visible | hidden | scroll | auto

    <li>overflow-policy-y ditto

    <li>overflow-x: &lt;overflow-style-x&gt; || &lt;overflow-policy-x&gt;

    <li>overflow-y ditto

    <li>overflow: &lt;overflow-x&gt;
   </ul>

   <p>&lsquo;<a class=property href="#overflow0">overflow</a>&rsquo; is then
    a shorthand that sets -x and -y to the same value. (&lsquo;<code
    class=css>overflow: auto</code>&rsquo; is ambiguous, as is &lsquo;<code
    class=css>overflow: auto auto</code>&rsquo;, but it doesn't matter.)</p>
  </div>

  <h3 id=marquee><span class=secno>11.3. </span>The marquee properties</h3>

  <p>The marquee effect consists of the UA slowly moving the content of a box
   so that, over time, all parts of the box are visible at least once. The
   speed of the movement, whether the movement is in one direction only or
   back and forth, how far the content moves and how often may vary. But,
   unlike for most other scrolling mechanisms, these factors are not
   dependent on user events. Typically, marquee is used in contexts where
   there is no room for a scrollbar or other visible mechanism or when user
   interaction is limited: instead of actively moving hidden content into
   view with a scrollbar or similar mechanism, the user waits while the
   content moves by.

  <div class=example>
   <p>The following rules put the contents of each list item on a single line
    (unless it has hard line breaks) and causes the list items that are too
    wide to use a marquee effect (on UAs that support marquee):</p>

   <pre>
li {overflow: auto; overflow-style: marquee; white-space: nowrap}
</pre>
  </div>

  <table class=propdef id=namemarquee-style>
   <tbody>
    <tr>
     <td>Name:

     <td><dfn id=marquee-style>marquee-style</dfn>

    <tr>
     <td>Value:

     <td>scroll | slide | alternate

    <tr>
     <td>Initial:

     <td>scroll

    <tr>
     <td>Applies to:

     <td>same as &lsquo;<a class=property
      href="#overflow0">overflow</a>&rsquo;

    <tr>
     <td>Inherited:

     <td>no

    <tr>
     <td>Percentages:

     <td>N/A

    <tr>
     <td>Media:

     <td>visual

    <tr>
     <td>Computed value:

     <td>as specified
  </table>

  <p>The values are:

  <dl>
   <dt><dfn id=scroll0 title="scroll (marquee-style)">scroll</dfn>

   <dd>Start completely off one side, scroll all the way across and
    completely off.

   <dt><dfn id=slide>slide</dfn>

   <dd>Start completely off one side, scroll in, and stop as soon as no more
    content is off that side.

   <dt><dfn id=alternate>alternate</dfn>

   <dd>Start with all overflow on one side, then scroll until there is no
    more overflow on that side. For the next loop, start with content
    overflowing on the other side (i.e., where the previous loop ended).
  </dl>

  <p class=issue>Is &lsquo;<code class=css>bounce</code>&rsquo; a better name
   than &lsquo;<code class=css><a
   href="#alternate">alternate</a></code>&rsquo;?

  <p>The content of an element moves as one piece. E.g., if a element has two
   lines of text, both lines scroll together, even if only one of them
   overflows.

  <table class=propdef id=namemarquee-loop>
   <tbody>
    <tr>
     <td>Name:

     <td><dfn id=marquee-loop>marquee-loop</dfn>

    <tr>
     <td>Value:

     <td><var>&lt;non-negative-integer></var> | infinite

    <tr>
     <td>Initial:

     <td>1

    <tr>
     <td>Applies to:

     <td>same as &lsquo;<a class=property
      href="#overflow0">overflow</a>&rsquo;

    <tr>
     <td>Inherited:

     <td>no

    <tr>
     <td>Percentages:

     <td>N/A

    <tr>
     <td>Media:

     <td>visual

    <tr>
     <td>Computed value:

     <td>as specified
  </table>

  <p>This property specifies how often the content moves. UAs should restart
   the loop count every time the element turns from completely invisible into
   (fully or partially) visible. E.g., an element that is outside the
   viewport starts moving when it is scrolled into view.

  <p>A UA may also take the visibility of the UA viewport itself into
   account, e.g., if the element is hidden behind a pop-up window or if the
   UA is iconified.

  <p>If &lsquo;<a class=property href="#marquee-loop">marquee-loop</a>&rsquo;
   is different for different states of the element, e.g., &lsquo;<code
   class=css>p {marquee-loop: 0} p:hover {marquee-loop:
   infinite}</code>&rsquo;, the loop counter must be reset each time the
   element enters a state with a different computed value.

  <div class=example>
   <p>For example, if the content of an li overflows under the following
    style rules, the content moves once when the li gets the focus or is
    hovered over. But, when it already has the focus when it is hovered over,
    the &lsquo;<a class=property href="#marquee-loop">marquee-loop</a>&rsquo;
    property doesn't change and thus the content doesn't move again:</p>

   <pre>
li {overflow: auto; overflow-style: marquee; marquee-loop: 0}
li:focus, li:hover {marquee-loop: 1}
</pre>
  </div>

  <p class=issue>Is &lsquo;<code class=css>infinite</code>&rsquo; a better
   default than &lsquo;<code class=css>1</code>&rsquo;?

  <table class=propdef id=namemarquee-direction>
   <tbody>
    <tr>
     <td>Name:

     <td><dfn id=marquee-direction>marquee-direction</dfn>

    <tr>
     <td>Value:

     <td>forward | reverse

    <tr>
     <td>Initial:

     <td>reverse

    <tr>
     <td>Applies to:

     <td>same as &lsquo;<a class=property
      href="#overflow0">overflow</a>&rsquo;

    <tr>
     <td>Inherited:

     <td>yes

    <tr>
     <td>Percentages:

     <td>N/A

    <tr>
     <td>Media:

     <td>visual

    <tr>
     <td>Computed value:

     <td>ltr or rtl
  </table>

  <p>This property determines the initial direction in which the content
   moves if the marquee effect is used. The actual direction depends on
   &lsquo;<a class=property href="#direction">direction</a>&rsquo; and
   &lsquo;<a class=property
   href="#block-progression">block-progression</a>&rsquo; as follows:

  <table class=equiv-table>
   <thead>
    <tr>
     <th>

     <th>

     <th>reverse

     <th>forward

   <tbody>
    <tr>
     <th rowspan=2>tb

     <th>ltr

     <td>left

     <td>right

    <tr>
     <th>rtl

     <td>right

     <td>left

    <tr>
     <th rowspan=2>rl / lr

     <th>ltr

     <td>up

     <td>down

    <tr>
     <th>rtl

     <td>down

     <td>up
  </table>

  <p class=note>Note that &lsquo;<code class=css>marquee-style:
   alternate</code>&rsquo; moves content in the opposite direction on
   even-numbered loops.

  <div class=note>
   <p>Note that &lsquo;<code class=css>reverse</code>&rsquo; allows text to
    be read in the normal order. E.g., in English text (&lsquo;<code
    class=css>block-progression: tb</code>&rsquo; and &lsquo;<code
    class=css>direction: ltr</code>&rsquo;), text appears at the right edge,
    moves to the left and disappears at the left edge.</p>
  </div>

  <table class=propdef id=namemarquee-speed>
   <tbody>
    <tr>
     <td>Name:

     <td><dfn id=marquee-speed>marquee-speed</dfn>

    <tr>
     <td>Value:

     <td>slow | normal | fast

    <tr>
     <td>Initial:

     <td>normal

    <tr>
     <td>Applies to:

     <td>same as &lsquo;<a class=property
      href="#overflow0">overflow</a>&rsquo;

    <tr>
     <td>Inherited:

     <td>no

    <tr>
     <td>Percentages:

     <td>N/A

    <tr>
     <td>Media:

     <td>visual

    <tr>
     <td>Computed value:

     <td>as specified
  </table>

  <p>This property determines how fast the content scrolls. The actual speed
   depends on the UA and the type of content. But, for a given UA and a given
   element, the following must always be true: slow < normal < fast.

  <h2 id=the-lsquo4><span class=secno>12. </span>The &lsquo;<a class=property
   href="#visibility">visibility</a>&rsquo; property</h2>

  <table class=propdef id=namevisibility>
   <tbody>
    <tr>
     <td>Name:

     <td><dfn id=visibility>visibility</dfn>

    <tr>
     <td>Value:

     <td>visible | hidden | collapse

    <tr>
     <td>Initial:

     <td> visible

    <tr>
     <td>Applies to:

     <td>all elements

    <tr>
     <td>Inherited:

     <td>yes

    <tr>
     <td>Percentages:

     <td>N/A

    <tr>
     <td>Media:

     <td>visual

    <tr>
     <td>Computed value:

     <td>as specified
  </table>

  <p>This property specifies whether the boxes generated by an element are
   rendered. Invisible boxes still affect layout (set the &lsquo;<a
   class=property href="#display">display</a>&rsquo; property to &lsquo;<code
   class=css><a href="#none0">none</a></code>&rsquo; to suppress box
   generation altogether). Values have the following meanings:

  <dl>
   <dt><dfn id=visible0>visible</dfn>

   <dd>The generated box is visible.

   <dt><dfn id=hidden0>hidden</dfn>

   <dd>The generated box is invisible (fully transparent, nothing is drawn),
    but still affects layout. Furthermore, descendants of the element will be
    visible if they have &lsquo;<code class=css>visibility:
    visible</code>&rsquo;.

   <dt><dfn id=collapse>collapse</dfn>

   <dd>See the Tables module <a href="#CSS3TBL"
    rel=biblioentry>[CSS3TBL]<!--{{CSS3TBL}}--></a>. If used on elements
    other than rows, row groups, columns, or column groups, &lsquo;<code
    class=css><a href="#collapse">collapse</a></code>&rsquo; has the same
    meaning as &lsquo;<code class=css><a
    href="#hidden0">hidden</a></code>&rsquo;.
  </dl>

  <h2 id=rotating><span class=secno>13. </span>Rotating boxes</h2>

  <p class=issue>Should probably be in the extended Box module instead of
   here&hellip;

  <table class=propdef id=namerotation>
   <tbody>
    <tr>
     <td>Name:

     <td><dfn id=rotation>rotation</dfn>

    <tr>
     <td>Value:

     <td><var><a href="#ltanglegt">&lt;angle&gt;</a></var>

    <tr>
     <td>Initial:

     <td>0

    <tr>
     <td>Applies to:

     <td><a href="#block-level">block-level</a> elements, inline-table and
      inline-block

    <tr>
     <td>Inherited:

     <td>no

    <tr>
     <td>Percentages:

     <td>N/A

    <tr>
     <td>Media:

     <td>visual

    <tr>
     <td>Computed value:

     <td>0deg &le; <var>angle</var> &lt; 360deg
  </table>

  <table class=propdef id=namerotation-point>
   <tbody>
    <tr>
     <td>Name:

     <td><dfn id=rotation-point>rotation-point</dfn>

    <tr>
     <td>Value:

     <td><var><a href="#ltbg-positiongt">&lt;bg-position&gt;</a></var>

    <tr>
     <td>Initial:

     <td>50% 50%

    <tr>
     <td>Applies to:

     <td><a href="#block-level">block-level</a> elements

    <tr>
     <td>Inherited:

     <td>no

    <tr>
     <td>Percentages:

     <td>Width and height of border box

    <tr>
     <td>Media:

     <td>visual

    <tr>
     <td>Computed value:

     <td>for &lt;length&gt; the absolute value, otherwise a percentage
  </table>

  <p>The value of &lsquo;<a class=property
   href="#rotation-point">rotation-point</a>&rsquo; is a pair of values that
   defines a point as an offset from the top left <a href="#border0">border
   edge.</a> Percentages refer to the width and height of the border box.
   Values may be negative.

  <p>&lsquo;<a class=property href="#rotation">Rotation</a>&rsquo; rotates a
   <a href="#block-level">block-level</a> element counterclockwise around the
   point given by &lsquo;<a class=property
   href="#rotation-point">rotation-point</a>&rsquo;. The border, padding and
   content are rotated, and also any background that is not &lsquo;<code
   class=css>fixed</code>&rsquo;. All static or relatively positioned child
   elements (and their static and relatively positioned children,
   recursively) are rotated along. But absolutely positioned and fixed
   descendant elements are not.

  <p class=note>Note that this means that rotation is relative. A child of a
   box that is rotated 45deg and that has a rotation of -45deg itself,
   actually ends up horizontal (but probably in a different location than
   when both rotations had been 0).

  <p>Rotation doesn't affect parent or sibling elements, they are laid out as
   if the element's rotation was 0. Conceptually, the element is first laid
   out without any rotation, then any relative positioning is applied to it
   (see <a href="#CSS3POS" rel=biblioentry>[CSS3POS]<!--{{CSS3POS}}--></a>)
   and finally any rotation. The rotation point is relative to the box
   <em>after</em> relative positioning.

  <p class=note>Note that, like relative positioning, rotation can thus cause
   an element's box to overlap other boxes. It is the author's responsibility
   to give the element wide enough margins if such overlapping is not
   desired.

  <p>When a box is broken over several columns or pages, each of the boxes is
   rotated separately around its own rotation point.

  <p>The computed value of &lsquo;<a class=property
   href="#rotation">rotation</a>&rsquo; is the angle normalized to fall in
   0deg &le; <var>angle</var> &lt; 360deg. The computed value or &lsquo;<a
   class=property href="#rotation-point">rotation-point</a>&rsquo; is a pair
   in which any <var><a href="#ltlengthgt">&lt;length&gt;</a></var> is made
   absolute, keywords are replaced by percentages and percentages are left as
   specified.

  <div class=example>
   <p>This example puts H1 elements upside down. It relies on the &lsquo;<a
    class=property href="#rotation-point">rotation-point</a>&rsquo; having
    its default value of &lsquo;<code class=css>50% 50%</code>&rsquo;.</p>

   <pre>H1 {rotation: 180deg}</pre>
  </div>

  <div class=example>
   <p>This example displays column headers in a table diagonally. It uses
    &lsquo;<a class=property
    href="#block-progression">block-progression</a>&rsquo; (see <a
    href="#CSS3TEXTLAYOUT"
    rel=biblioentry>[CSS3TEXTLAYOUT]<!--{{!CSS3TEXTLAYOUT}}--></a>) to write
    the column headers vertically and applies &lsquo;<a class=property
    href="#rotation">rotation</a>&rsquo; to rotate the headers 45 degrees to
    the left. A fairly wide padding is applied, to make sure the text of the
    headings doesn't overlap.</p>

   <pre>
thead th {
    block-progression: rl;
    padding: 0.5em 1em;
    rotation: 45deg;
    rotation-point: bottom left }
</pre>

   <div class=figure>
    <p><img alt="[Example rendering]" src=diagonal-headings></p>

    <p class=caption>Example of a table with rotated column headings.</p>
   </div>
  </div>

  <p class=issue>In the table example, how are the borders rotated? Because
   the borders belong to two elements that are rotated individually.

  <p class=issue>Dave Hyatt proposes to generalize the property and call it
   “transform” with a <a
   href="/TR/2003/REC-SVG11-20030114/coords.html#TransformAttribute"> syntax
   and functionality like in SVG,</a> i.e., a property that accepts a series
   of transformations (rotations, translations, arbitrary affine
   transformations).

  <h2 id=stacking><span class=secno>14. </span>Stacking contexts</h2>

  <p>This section defines the painting order in more detail than described in
   the rest of the specification.

  <p>Definitions:

  <dl>
   <dt>Tree Order

   <dd>Preorder depth-first traversal of the <em>rendering</em> tree, in
    logical (not visual) order for bidirectional content, after taking into
    account properties that move boxes around such as the &lsquo;<a
    class=property href="#run-in">run-in</a>&rsquo; value of &lsquo;<a
    class=property href="#display">display</a>&rsquo;.

   <dt>Element

   <dd>In this section, “element” refers to actual elements,
    pseudo-elements, and anonymous boxes. Pseudo-elements and anonymous boxes
    are treated as descendants in the appropriate places. For example, an
    outside list marker comes before an adjoining &lsquo;<code
    class=css>:before</code>&rsquo; box in the line box, which comes before
    the content of the box, and so forth.
  </dl>

  <p>The bottom of the stack is the furthest from the user, the top of the
   stack is the nearest to the user:

  <div class=figure>
   <p><img alt="All layers are between the canvas and the user"
    src=stack.png></p>

   <p class=caption>Schematic diagram of a stacking context with four layers.</p>
  </div>
  <!--
<pre>
             |     |         |    |
             |          |    |    |     &#8678; &#9787;
             |          |         |     user
z-index:  canvas  -1    0    1    2
</pre>
-->

  <p>The stacking context background and most negative positioned stacking
   contexts are at the bottom of the stack, while the most positive
   positioned stacking contexts are at the top of the stack.

  <p>The canvas is transparent if contained within another, and given a
   UA-defined color if it is not. It is infinite in extent and contains the
   root element. Initially, the viewport is anchored with its top left corner
   at the canvas origin.

  <p>The stacking order for an element generating a stacking context (see the
   &lsquo;<a class=property href="#z-index">z-index</a>&rsquo; property) is:

  <ol class=stack>
   <li>
    <p>If the element is a root element:</p>

    <ol>
     <li>background color of element over the entire canvas.

     <li>background image of element, over the entire canvas, anchored at the
      origin that would be used if it was painted for the root element.
    </ol>

   <li>
    <p>If the element is a block, list-item, or other block equivalent:</p>

    <ol>
     <li>background color of element unless it is the root element.

     <li>background image of element unless it is the root element.

     <li>border of element.
    </ol>

    <p>Otherwise, if the element is a block level table:</p>

    <ol>
     <li>table backgrounds (color then image) unless it is the root element.

     <li>column group backgrounds (color then image).

     <li>column backgrounds (color then image).

     <li>row group backgrounds (color then image).

     <li>row backgrounds (color then image).

     <li>cell backgrounds (color then image).

     <li>all table borders (in tree order for separated borders).
    </ol>

   <li>
    <p>Stacking contexts formed by positioned descendants with negative
     z-indices (excluding 0) in z-index order (most negative first) then tree
     order.</p>

   <li>
    <p>For all its in-flow, non-positioned, <a
     href="#block-level">block-level</a> descendants in tree order: If the
     element is a block, list-item, or other block equivalent:</p>

    <ol>
     <li>background color of element.

     <li>background image of element.

     <li>border of element.
    </ol>

    <p>Otherwise, the element is a table:</p>

    <ol>
     <li>table backgrounds (color then image).

     <li>column group backgrounds (color then image).

     <li>column backgrounds (color then image).

     <li>row group backgrounds (color then image).

     <li>row backgrounds (color then image).

     <li>cell backgrounds (color then image).

     <li>all table borders (in tree order for separated borders).
    </ol>

   <li>
    <p>All non-positioned floating descendants, in tree order. For each one
     of these, treat the element as if it created a new stacking context, but
     any descendants which actually create a new stacking context should be
     considered part of the parent stacking context, not this new one.</p>

   <li>
    <p>If the element is an inline element that generates a stacking context,
     then:</p>

    <ol>
     <li>For each line box that the element is in:
      <ol>
       <li>Jump to <a href="#each-box">7.2.1</a> for the box(es) of the
        element in that line box (in tree order).
      </ol>
    </ol>

   <li>
    <p>Otherwise: first for the element, then for all its in-flow,
     non-positioned, <a href="#block-level">block-level</a> descendants in
     tree order:</p>

    <ol>
     <li>
      <p>If the element is a <a href="#block-level">block-level</a> replaced
       element, then: the replaced content, atomically.</p>

     <li>
      <p>Otherwise, for each line box of that element:</p>

      <ol>
       <li id=each-box>For each box that is a child of that element, in that
        line box, in tree order:
        <ol>
         <li>background color of element.

         <li>background image of element.

         <li>border of element.

         <li>For inline elements:
          <ol>
           <li> For all the element's in-flow, non-positioned, inline-level
            children that are in this line box, and all runs of text inside
            the element that is on this line box, in tree order:
            <ol>
             <li>If this is a run of text, then:
              <ol>
               <li>any underlining affecting the text of the element, in tree
                order of the elements applying the underlining (such that the
                deepest element's underlining, if any, is painted topmost and
                the root element's underlining, if any, is drawn bottommost).

               <li>any overlining affecting the text of the element, in tree
                order of the elements applying the overlining (such that the
                deepest element's overlining, if any, is painted topmost and
                the root element's overlining, if any, is drawn bottommost).

               <li>the text.

               <li>any line-through affecting the text of the element, in
                tree order of the elements applying the line-through (such
                that the deepest element's line-through, if any, is painted
                topmost and the root element's line-through, if any, is drawn
                bottommost).
              </ol>

             <li>Otherwise, jump to <a href="#each-box">7.2.1</a> for that
              element.
            </ol>
          </ol>

          <p>For inline-block and inline-table elements:</p>

          <ol>
           <li>For each one of these, treat the element as if it created a
            new stacking context, but any descendants which actually create a
            new stacking context should be considered part of the parent
            stacking context, not this new one.
          </ol>

          <p>For inline-level replaced elements:</p>

          <ol>
           <li>the replaced content, atomically.
          </ol>
        </ol>

        <p class=note>Some of the boxes may have been generated by line
         splitting or the Unicode bidirectional algorithm.</p>

       <li>Optionally, the outline of the element (see 10 below).
      </ol>

     <li>
      <p>Optionally, if the element is <a
       href="#block-level">block-level,</a> the outline of the element (see
       <a href="#outlines">10 below</a>).</p>
    </ol>

   <li>
    <p>All positioned descendants with &lsquo;<code class=css>z-index:
     auto</code>&rsquo; or &lsquo;<code class=css>z-index: 0</code>&rsquo;,
     in tree order. For those with &lsquo;<code class=css>z-index:
     auto</code>&rsquo;, treat the element as if it created a new stacking
     context, but any descendants which actually create a new stacking
     context should be considered part of the parent stacking context, not
     this new one. For those with &lsquo;<code class=css>z-index:
     0</code>&rsquo;, treat the stacking context generated atomically.</p>

   <li>
    <p>Stacking contexts formed by positioned descendants with z-indices
     greater than or equal to 1 in z-index order (smallest first) then tree
     order.</p>

   <li id=outlines>
    <p>Finally, implementations that do not draw outlines in steps above must
     draw outlines from this stacking context at this stage. (It is
     recommended to draw outlines in this step and not in the steps above.)</p>
  </ol>

  <p>The background of the root element is only painted once, over the whole
   canvas.

  <p>While the backgrounds of bidirectional inlines are painted in tree
   order, they are positioned in visual order. Since the positioning of
   inline backgrounds is unspecified <span class=issue>[still the
   case?]</span>, the exact result of these two requirements is UA-defined.

  <h2 id=conformance><span class=secno>15. </span>Conformance and profiles</h2>

  <h2 id=acknowledgments><span class=secno>16. </span>Acknowledgments</h2>

  <h2 class=no-num id=references>References</h2>

  <p>Normative references: <!--begin-normative--> <!-- Sorted by label -->

  <dl class=bibliography>
   <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
    <!---->

   <dt id=CSS3BG>[CSS3BG]

   <dd>Tim Boland; Bert Bos. <cite>CSS3 Backgrounds and Borders
    Module.</cite> 16 February 2005. W3C Working Draft. (Work in progress.)
    URL: <a
    href="http://www.w3.org/TR/2005/WD-css3-background-20050216">http://www.w3.org/TR/2005/WD-css3-background-20050216</a>
    </dd>
   <!---->

   <dt id=CSS3GENCON>[CSS3GENCON]

   <dd>Ian Hickson. <cite>CSS3 Generated and Replaced Content Module.</cite>
    14 May 2003. W3C Working Draft. (Work in progress.) URL: <a
    href="http://www.w3.org/TR/2003/WD-css3-content-20030514">http://www.w3.org/TR/2003/WD-css3-content-20030514</a>
    </dd>
   <!---->

   <dt id=CSS3SYN>[CSS3SYN]

   <dd>L. David Baron. <cite>CSS3 module: Syntax.</cite> 13 August 2003. W3C
    Working Draft. (Work in progress.) URL: <a
    href="http://www.w3.org/TR/2003/WD-css3-syntax-20030813">http://www.w3.org/TR/2003/WD-css3-syntax-20030813</a>
    </dd>
   <!---->

   <dt id=CSS3TEXT>[CSS3TEXT]

   <dd>Elika J. Etemad. <cite>CSS3 Text Module.</cite> 27 June 2005. W3C
    Working Draft. (Work in progress.) URL: <a
    href="http://www.w3.org/TR/2005/WD-css3-text-20050627">http://www.w3.org/TR/2005/WD-css3-text-20050627</a>
    </dd>
   <!---->

   <dt id=CSS3TEXTLAYOUT>[CSS3TEXTLAYOUT]

   <dd>Elika J. Etemad; Paul Nelson. <cite>CSS3 Text Layout Module.</cite>
    (forthcoming). W3C Working Draft. (Work in progress.)</dd>
   <!---->

   <dt id=CSS3VAL>[CSS3VAL]

   <dd>H&#229;kon Wium Lie; Chris Lilley. <cite>CSS3 module: Values and
    Units.</cite> 13 July 2001. W3C Working Draft. (Work in progress.) URL:
    <a
    href="http://www.w3.org/TR/2001/WD-css3-values-20010713">http://www.w3.org/TR/2001/WD-css3-values-20010713</a>
    </dd>
   <!---->
  </dl>
  <!--end-normative-->

  <p class=no-num>Informative references: <!--begin-informative-->
   <!-- Sorted by label -->

  <dl class=bibliography>
   <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
    <!---->

   <dt id=CSS21>[CSS21]

   <dd>Bert Bos; et al. <cite>Cascading Style Sheets, level 2 revision
    1.</cite> 11 April 2006. W3C Working Draft. (Work in progress.) URL: <a
    href="http://www.w3.org/TR/2006/WD-CSS21-20060411">http://www.w3.org/TR/2006/WD-CSS21-20060411</a>
    </dd>
   <!---->

   <dt id=CSS3CASCADE>[CSS3CASCADE]

   <dd>H&#229;kon Wium Lie. <cite>CSS3 module: Cascading and
    inheritance.</cite> 19 February 2002. W3C Working Draft. (Work in
    progress.) URL: <a
    href="http://www.w3.org/TR/2002/WD-css3-cascade-20020219">http://www.w3.org/TR/2002/WD-css3-cascade-20020219</a>
    </dd>
   <!---->

   <dt id=CSS3GCPM>[CSS3GCPM]

   <dd>H&#229;kon Wium Lie. <cite>CSS Generated Content for Paged Media
    Module.</cite> 19 September 2006. W3C Working Draft. (Work in progress)
    URL: <a
    href="http://www.w3.org/TR/2006/WD-css3-gcpm-20060919">http://www.w3.org/TR/2006/WD-css3-gcpm-20060919</a>
    </dd>
   <!---->

   <dt id=CSS3LAYOUT>[CSS3LAYOUT]

   <dd>Bert Bos. <cite>CSS3 Advanced Layout Module.</cite> 15 December 2005.
    W3C Working Draft. (Work in progress) URL: <a
    href="http://www.w3.org/TR/2005/WD-css3-layout-20051215/">http://www.w3.org/TR/2005/WD-css3-layout-20051215/</a>
    </dd>
   <!---->

   <dt id=CSS3LIST>[CSS3LIST]

   <dd>Ian Hickson; Tantek &#199;elik. <cite>CSS3 module: Lists.</cite> 7
    November 2002. W3C Working Draft. (Work in progress.) URL: <a
    href="http://www.w3.org/TR/2002/WD-css3-lists-20021107">http://www.w3.org/TR/2002/WD-css3-lists-20021107</a>
    </dd>
   <!---->

   <dt id=CSS3PAGE>[CSS3PAGE]

   <dd>H&#229;kon Wium Lie; Melinda Grant. <cite>CSS3 Paged Media
    Module.</cite> 25 February 2004. W3C Candidate Recommendation. (Work in
    progress.) URL: <a
    href="http://www.w3.org/TR/2004/CR-css3-page-20040225">http://www.w3.org/TR/2004/CR-css3-page-20040225</a>
    </dd>
   <!---->

   <dt id=CSS3POS>[CSS3POS]

   <dd>Bert Bos. <cite>CSS3 Positioning Module.</cite> (forthcoming). W3C
    Working Draft. (Work in progress.)</dd>
   <!---->

   <dt id=CSS3RUBY>[CSS3RUBY]

   <dd>Michel Suignard. <cite>CSS3 Ruby Module.</cite> 14 May 2003. W3C
    Candidate Recommendation. (Work in progress.) URL: <a
    href="http://www.w3.org/TR/2003/CR-css3-ruby-20030514">http://www.w3.org/TR/2003/CR-css3-ruby-20030514</a>
    </dd>
   <!---->

   <dt id=CSS3TBL>[CSS3TBL]

   <dd>Bert Bos; David Hyatt. <cite>CSS3 Tables Module.</cite> (forthcoming).
    W3C Working Draft. (Work in progress.)</dd>
   <!---->

   <dt id=MEDIAQ>[MEDIAQ]

   <dd>H&#229;kon Wium Lie; Tantek &#199;elik; Daniel Glazman. <cite>Media
    Queries.</cite> 8 July 2002. W3C Candidate Recommendation. (Work in
    progress.) URL: <a
    href="http://www.w3.org/TR/2002/CR-css3-mediaqueries-20020708">http://www.w3.org/TR/2002/CR-css3-mediaqueries-20020708</a>
    </dd>
   <!---->
  </dl>
  <!--end-informative-->

  <h2 class=no-num id=index>Index</h2>
  <!--begin-index-->

  <ul class=indexlist>
   <li>alternate, <a href="#alternate"><strong>#</strong></a>

   <li>anonymous box,, <a href="#anonymous"><strong>#</strong></a>

   <li>auto
    <ul>
     <li>value of 'overflow', <a href="#auto"><strong>#</strong></a>
    </ul>

   <li>background-position, <a
    href="#background-position"><strong>#</strong></a>

   <li>block, <a href="#block"><strong>#</strong></a>

   <li>block-level, <a href="#block-level"><strong>#</strong></a>

   <li>block-progression, <a href="#block-progression"><strong>#</strong></a>


   <li>border, <a href="#border1"><strong>#</strong></a>

   <li>border area, <a href="#border"><strong>#</strong></a>

   <li>border-bottom-width, <a
    href="#border-bottom-width"><strong>#</strong></a>

   <li>border edge., <a href="#border0"><strong>#</strong></a>

   <li>border-left-width, <a href="#border-left-width"><strong>#</strong></a>


   <li>border-right-width, <a
    href="#border-right-width"><strong>#</strong></a>

   <li>border-top-width, <a href="#border-top-width"><strong>#</strong></a>

   <li>bottom, <a href="#bottom"><strong>#</strong></a>

   <li>canvas, <a href="#canvas"><strong>#</strong></a>

   <li>clear, <a href="#clear"><strong>#</strong></a>

   <li>collapse, <a href="#collapse"><strong>#</strong></a>

   <li>collapsed through, <a href="#collapsed"><strong>#</strong></a>

   <li>compact, <a href="#compact"><strong>#</strong></a>

   <li>computed value, <a href="#computed"><strong>#</strong></a>

   <li>containing block, <a href="#containing"><strong>#</strong></a>

   <li>content area., <a href="#content"><strong>#</strong></a>

   <li>content edge., <a href="#content0"><strong>#</strong></a>

   <li>direction, <a href="#direction"><strong>#</strong></a>

   <li>display, <a href="#display"><strong>#</strong></a>

   <li>element, <a href="#elements."><strong>#</strong></a>

   <li>float, <a href="#float"><strong>#</strong></a>

   <li>flow, <a href="#flow"><strong>#</strong></a>

   <li>flow root, <a href="#flow-root"><strong>#</strong></a>

   <li>height, <a href="#height"><strong>#</strong></a>

   <li>hidden, <a href="#hidden"><strong>#</strong></a>, <a
    href="#hidden0"><strong>#</strong></a>

   <li>horizontal, <a href="#horizontal"><strong>#</strong></a>

   <li>image-scaling, <a href="#image-scaling"><strong>#</strong></a>

   <li>initial containing block., <a href="#initial"><strong>#</strong></a>

   <li>inline, <a href="#inline"><strong>#</strong></a>

   <li>inline-block, <a href="#inline-block"><strong>#</strong></a>

   <li>inline-level, <a href="#inline-level"><strong>#</strong></a>

   <li>inline-table, <a href="#inline-table"><strong>#</strong></a>

   <li>intrinsic, <a href="#intrinsic"><strong>#</strong></a>

   <li>left, <a href="#left"><strong>#</strong></a>

   <li>line box., <a href="#line-box."><strong>#</strong></a>

   <li>list-item, <a href="#list-item"><strong>#</strong></a>

   <li>margin, <a href="#margin1"><strong>#</strong></a>

   <li>margin area, <a href="#margin"><strong>#</strong></a>

   <li>margin-bottom, <a href="#margin-bottom"><strong>#</strong></a>

   <li>margin edge., <a href="#margin0"><strong>#</strong></a>

   <li>margin-left, <a href="#margin-left"><strong>#</strong></a>

   <li>margin-right, <a href="#margin-right"><strong>#</strong></a>

   <li>margin-top, <a href="#margin-top"><strong>#</strong></a>

   <li>marquee-direction, <a href="#marquee-direction"><strong>#</strong></a>


   <li>marquee-loop, <a href="#marquee-loop"><strong>#</strong></a>

   <li>marquee-speed, <a href="#marquee-speed"><strong>#</strong></a>

   <li>marquee-style, <a href="#marquee-style"><strong>#</strong></a>

   <li>max-height, <a href="#max-height"><strong>#</strong></a>

   <li>max-width, <a href="#max-width"><strong>#</strong></a>

   <li>min-height, <a href="#min-height"><strong>#</strong></a>

   <li>min-width, <a href="#min-width"><strong>#</strong></a>

   <li>no-content, <a href="#no-content"><strong>#</strong></a>

   <li>no-display, <a href="#no-display"><strong>#</strong></a>

   <li>none, <a href="#none"><strong>#</strong></a>, <a
    href="#none0"><strong>#</strong></a>

   <li>normal flow, <a href="#normal"><strong>#</strong></a>

   <li>overflow, <a href="#overflow0"><strong>#</strong></a>

   <li>overflow-style, <a href="#overflow-style"><strong>#</strong></a>

   <li>overflow-x, <a href="#overflow-x"><strong>#</strong></a>

   <li>overflow-y, <a href="#overflow-y"><strong>#</strong></a>

   <li>padding, <a href="#padding1"><strong>#</strong></a>

   <li>padding area, <a href="#padding"><strong>#</strong></a>

   <li>padding-bottom, <a href="#padding-bottom"><strong>#</strong></a>

   <li>padding edge., <a href="#padding0"><strong>#</strong></a>

   <li>padding-left, <a href="#padding-left"><strong>#</strong></a>

   <li>padding-right, <a href="#padding-right"><strong>#</strong></a>

   <li>padding-top, <a href="#padding-top"><strong>#</strong></a>

   <li>position, <a href="#position"><strong>#</strong></a>

   <li>replaced, <a href="#replaced"><strong>#</strong></a>

   <li>right, <a href="#right"><strong>#</strong></a>

   <li>root element., <a href="#root-"><strong>#</strong></a>

   <li>rotation, <a href="#rotation"><strong>#</strong></a>

   <li>rotation-point, <a href="#rotation-point"><strong>#</strong></a>

   <li>ruby, <a href="#ruby"><strong>#</strong></a>

   <li>ruby-base, <a href="#ruby-base"><strong>#</strong></a>

   <li>ruby-base-group, <a href="#ruby-base-group"><strong>#</strong></a>

   <li>ruby-text, <a href="#ruby-text"><strong>#</strong></a>

   <li>ruby-text-group, <a href="#ruby-text-group"><strong>#</strong></a>

   <li>run-in, <a href="#run-in"><strong>#</strong></a>

   <li>scroll, <a href="#scroll"><strong>#</strong></a>

   <li>scrolling mechanism, <a href="#scrolling"><strong>#</strong></a>

   <li>scroll (marquee-style), <a href="#scroll0"><strong>#</strong></a>

   <li>shrink-to-fit, <a href="#shrink-to-fit0"><strong>#</strong></a>

   <li>slide, <a href="#slide"><strong>#</strong></a>

   <li>static position, <a href="#static"><strong>#</strong></a>

   <li>table, <a href="#table"><strong>#</strong></a>

   <li>table-caption, <a href="#table-caption"><strong>#</strong></a>

   <li>table-cell, <a href="#table-cell"><strong>#</strong></a>

   <li>table-column, <a href="#table-column"><strong>#</strong></a>

   <li>table-column-group, <a
    href="#table-column-group"><strong>#</strong></a>

   <li>table-footer-group, <a
    href="#table-footer-group"><strong>#</strong></a>

   <li>table-header-group, <a
    href="#table-header-group"><strong>#</strong></a>

   <li>table-row, <a href="#table-row"><strong>#</strong></a>

   <li>table-row-group, <a href="#table-row-group"><strong>#</strong></a>

   <li>top, <a href="#top"><strong>#</strong></a>

   <li>used value., <a href="#used-value."><strong>#</strong></a>

   <li><var>&lt;angle&gt;</var>, <a href="#ltanglegt"><strong>#</strong></a>

   <li><var>&lt;bg-position&gt;</var>, <a
    href="#ltbg-positiongt"><strong>#</strong></a>

   <li><var>&lt;length&gt;</var>, <a
    href="#ltlengthgt"><strong>#</strong></a>

   <li><var>&lt;number&gt;</var>, <a
    href="#ltnumbergt"><strong>#</strong></a>

   <li><var>&lt;page-floats&gt;</var>, <a
    href="#ltpage-floatsgt"><strong>#</strong></a>

   <li><var>&lt;template&gt;</var>, <a
    href="#lttemplategt"><strong>#</strong></a>

   <li>vertical., <a href="#vertical."><strong>#</strong></a>

   <li>viewport, <a href="#viewport"><strong>#</strong></a>

   <li>visibility, <a href="#visibility"><strong>#</strong></a>

   <li>visible, <a href="#visible"><strong>#</strong></a>, <a
    href="#visible0"><strong>#</strong></a>

   <li>width, <a href="#width"><strong>#</strong></a>

   <li>z-index, <a href="#z-index"><strong>#</strong></a>
  </ul>
  <!--end-index-->

  <h2 class=no-num id=property>Property index</h2>
  <!--begin properties-->

  <table class=proptable>
   <thead>
    <tr>
     <th>Property

     <th>Values

     <th>Initial

     <th>Applies&nbsp;to

     <th>Inh.

     <th>Percentages

     <th>Media

   <tbody>
    <tr valign=baseline>
     <td><a class=property href="#clear">clear</a>

     <td>none | left | right | both

     <td>none

     <td>block-level elements

     <td>no

     <td>N/A

     <td>visual

    <tr valign=baseline>
     <td><a class=property href="#display">display</a>

     <td>inline | block | inline-block | list-item | run-in | compact | table
      | inline-table | table-row-group | table-header-group |
      table-footer-group | table-row | table-column-group | table-column |
      table-cell | table-caption | ruby | ruby-base | ruby-text |
      ruby-base-group | ruby-text-group | &lt;template&gt;| none

     <td>inline

     <td>all elements

     <td>no

     <td>N/A

     <td>visual (&lsquo;none&rsquo; applies to all media)

    <tr valign=baseline>
     <td><a class=property href="#float">float</a>

     <td>left | right | none | &lt;page-floats&gt;

     <td>none

     <td>all, but see 9.7

     <td>no

     <td>N/A

     <td>visual

    <tr valign=baseline>
     <td><a class=property href="#height">height</a>

     <td>&lt;length> | &lt;percentage> | auto

     <td>auto

     <td>all elements but non-replaced inline elements, table columns, and
      column groups

     <td>no

     <td>see prose

     <td>visual

    <tr valign=baseline>
     <td><a class=property href="#margin1">margin</a>

     <td>[ &lt;length&gt; | &lt;percentage&gt; | auto ]{1,4}

     <td>(see individual properties)

     <td>see text

     <td>no

     <td>width* of containing block

     <td>visual

    <tr valign=baseline>
     <td><a class=property href="#margin-top">margin-top </a>, <a
      class=property href="#margin-right">margin-right</a>, <a class=property
      href="#margin-bottom">margin-bottom</a>, <a class=property
      href="#margin-left">margin-left</a>

     <td>&lt;length&gt; | &lt;percentage&gt; | auto

     <td>0

     <td>see text

     <td>no

     <td>width* of containing block

     <td>visual

    <tr valign=baseline>
     <td><a class=property href="#marquee-direction">marquee-direction</a>

     <td>forward | reverse

     <td>reverse

     <td>same as &lsquo;overflow&rsquo;

     <td>yes

     <td>N/A

     <td>visual

    <tr valign=baseline>
     <td><a class=property href="#marquee-loop">marquee-loop</a>

     <td>&lt;non-negative-integer> | infinite

     <td>1

     <td>same as &lsquo;overflow&rsquo;

     <td>no

     <td>N/A

     <td>visual

    <tr valign=baseline>
     <td><a class=property href="#marquee-speed">marquee-speed</a>

     <td>slow | normal | fast

     <td>normal

     <td>same as &lsquo;overflow&rsquo;

     <td>no

     <td>N/A

     <td>visual

    <tr valign=baseline>
     <td><a class=property href="#marquee-style">marquee-style</a>

     <td>scroll | slide | alternate

     <td>scroll

     <td>same as &lsquo;overflow&rsquo;

     <td>no

     <td>N/A

     <td>visual

    <tr valign=baseline>
     <td><a class=property href="#max-width">max-width</a>, <a class=property
      href="#max-height">max-height</a>

     <td>&lt;length&gt; | &lt;percentage&gt; | none

     <td>none

     <td>all elements but non-replaced inline elements, table rows, and row
      groups

     <td>no

     <td>refer to width, resp. height of containing block

     <td>visual

    <tr valign=baseline>
     <td><a class=property href="#min-width">min-width</a>, <a class=property
      href="#min-height">min-height</a>

     <td>&lt;length&gt; | &lt;percentage&gt; | inherit

     <td>0

     <td>all elements but non-replaced inline elements, table rows, and row
      groups

     <td>no

     <td>refer to width, resp. height of containing block

     <td>visual

    <tr valign=baseline>
     <td><a class=property href="#overflow0">overflow</a>

     <td>[ visible | hidden | scroll | auto | no-display | no-content ]{1,2}

     <td>see individual properties

     <td>non-replaced block-level elements and non-replaced
      &lsquo;inline-block&rsquo; elements

     <td>no

     <td>N/A

     <td>visual

    <tr valign=baseline>
     <td><a class=property href="#overflow-style">overflow-style</a>

     <td>auto | [scrollbar | panner | move | marquee] [, [scrollbar | panner
      | move | marquee]]*

     <td>auto

     <td>same as &lsquo;overflow&rsquo;

     <td>yes

     <td>N/A

     <td>visual

    <tr valign=baseline>
     <td><a class=property href="#overflow-x">overflow-x</a>, <a
      class=property href="#overflow-y">overflow-y</a>, <span
      class=property></span>

     <td>visible | hidden | scroll | auto | no-display | no-content

     <td>visible

     <td>non-replaced block-level elements and non-replaced
      &lsquo;inline-block&rsquo; elements

     <td>no

     <td>N/A

     <td>visual

    <tr valign=baseline>
     <td><a class=property href="#padding1">padding</a>

     <td>[ &lt;length&gt; | &lt;percentage&gt; ]{1,4}

     <td>(see individual properties)

     <td>all elements

     <td>no

     <td>width* of containing block

     <td>visual

    <tr valign=baseline>
     <td><a class=property href="#padding-top">padding-top </a>, <a
      class=property href="#padding-right">padding-right</a>, <a
      class=property href="#padding-bottom">padding-bottom</a>, <a
      class=property href="#padding-left">padding-left</a>

     <td>[ &lt;length&gt; | &lt;percentage&gt; ]

     <td>0

     <td>all elements

     <td>no

     <td>width* of containing block

     <td>visual

    <tr valign=baseline>
     <td><a class=property href="#rotation">rotation</a>

     <td>&lt;angle&gt;

     <td>0

     <td>block-level elements, inline-table and inline-block

     <td>no

     <td>N/A

     <td>visual

    <tr valign=baseline>
     <td><a class=property href="#rotation-point">rotation-point</a>

     <td>&lt;bg-position&gt;

     <td>50% 50%

     <td>block-level elements

     <td>no

     <td>Width and height of border box

     <td>visual

    <tr valign=baseline>
     <td><a class=property href="#visibility">visibility</a>

     <td>visible | hidden | collapse

     <td>visible

     <td>all elements

     <td>yes

     <td>N/A

     <td>visual

    <tr valign=baseline>
     <td><a class=property href="#width">width</a>

     <td>&lt;length> | &lt;percentage> | auto

     <td>auto

     <td>all elements but non-replaced inline elements, table rows, and row
      groups

     <td>no

     <td>refer to width of containing block

     <td>visual
  </table>
  <!--end properties-->

  <p>Properties defined elsewhere:

  <ul>
   <li><dfn id=block-progression>block-progression</dfn>, <dfn
    id=direction>direction</dfn>: <a href="#CSS3TEXTLAYOUT"
    rel=biblioentry>[CSS3TEXTLAYOUT]<!--{{!CSS3TEXTLAYOUT}}--></a>

   <li><dfn id=border1>border</dfn>, <dfn
    id=border-top-width>border-top-width</dfn>, <dfn
    id=border-right-width>border-right-width</dfn>, <dfn
    id=border-bottom-width>border-bottom-width</dfn>, <dfn
    id=border-left-width>border-left-width</dfn>, <dfn
    id=background-position>background-position</dfn>: <a href="#CSS3BG"
    rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a>

   <li><dfn id=bottom>bottom</dfn>, <dfn id=top>top</dfn>, <dfn
    id=z-index>z-index</dfn>: <a href="#CSS3POS"
    rel=biblioentry>[CSS3POS]<!--{{CSS3POS}}--></a>

   <li><dfn id=image-scaling>image-scaling</dfn>: <a href="#CSS3PAGE"
    rel=biblioentry>[CSS3PAGE]<!--{{CSS3PAGE}}--></a>

   <li><dfn id=position>position</dfn>: <a href="#CSS3POS"
    rel=biblioentry>[CSS3POS]<!--{{CSS3POS}}--></a> and <a href="#CSS3LAYOUT"
    rel=biblioentry>[CSS3LAYOUT]<!--{{CSS3LAYOUT}}--></a>
  </ul>
  <!-- Keep this comment at the end of the file
Local variables:
mode: sgml
sgml-minimize-attributes:t
End:
-->