You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
5258 lines
186 KiB
5258 lines
186 KiB
<!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>
|
|
© 2007 <a href="http://www.w3.org/"><acronym title="World Wide Web
|
|
Consortium">W3C</acronym></a><sup>®</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 “css3-box” in the subject, preferably like this:
|
|
“[<!---->css3-box<!---->] <em>…summary of
|
|
comment…</em>”
|
|
|
|
<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
|
|
‘display’ 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
|
|
‘width’ and ‘height’ properties</a>
|
|
|
|
<li><a href="#min-max"><span class=secno>8. </span>The
|
|
‘min-width’, ‘max-width’,
|
|
‘min-height’ and ‘max-height’ 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 ‘overflow’
|
|
computes to ‘<code class=css>visible</code>’</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>‘Inline-block’ 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>‘<code
|
|
class=css>Auto</code>’ 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
|
|
‘float’ 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
|
|
‘clear’ 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
|
|
‘overflow’, ‘overflow-x’ and
|
|
‘overflow-y’ properties</a>
|
|
|
|
<li><a href="#the-lsquo3"><span class=secno>11.2. </span>The
|
|
‘overflow-style’ 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
|
|
‘visibility’ 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> –
|
|
switch between vertical and horizontal text.
|
|
|
|
<li><cite>CSS Syntax Module</cite> <a href="#CSS3SYN"
|
|
rel=biblioentry>[CSS3SYN]<!--{{!CSS3SYN}}--></a> – syntax of
|
|
properties and values
|
|
|
|
<li><cite>CSS Values and Units Module</cite> <a href="#CSS3VAL"
|
|
rel=biblioentry>[CSS3VAL]<!--{{!CSS3VAL}}--></a> – definitions of
|
|
value types <dfn id=ltnumbergt><var><number></var></dfn>, <dfn
|
|
id=ltanglegt><var><angle></var></dfn> and <dfn
|
|
id=ltlengthgt><var><length></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> – 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>
|
|
– 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> – defines <dfn
|
|
id=ltbg-positiongt><var><bg-position></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><ul>
|
|
<li>The first item in the list.
|
|
<li>The second item.
|
|
</ul></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 “generated content,” 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
|
|
“the <var>P</var> property of an element” and “the
|
|
<var>P</var> property of a box” (both of which actually mean
|
|
“<em>the value</em> of property <var>P</var> of…”),
|
|
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
|
|
“absent” 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 ‘<a
|
|
class=property href="#block-progression">block-progression</a>’
|
|
property is ‘<code class=css>tb</code>’, 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
|
|
“Example.” Examples are not normative.</p>
|
|
</div>
|
|
|
|
<p class=note>Notes look like this and normally start with the word
|
|
“Note.” 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 “Inherited” and “Initial”
|
|
rows in the table are used by the Cascading and Inheritance module <a
|
|
href="#CSS3CASCADE"
|
|
rel=biblioentry>[CSS3CASCADE]<!--{{CSS3CASCADE}}--></a> and
|
|
“Media” 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 ‘<a class=property
|
|
href="#display">display</a>’ 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"><template></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 (‘<code class=css><a
|
|
href="#none0">none</a></code>’ 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 ‘<a class=property
|
|
href="#float">float</a>’ and ‘<a class=property
|
|
href="#position">position</a>’, 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><template></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 ‘<a
|
|
class=property href="#display">display</a>’ property on the
|
|
descendants.
|
|
</dl>
|
|
|
|
<p class=note>Note that ‘<code class=css><a
|
|
href="#none0">none</a></code>’ does not create an invisible box; it
|
|
creates no box at all. See ‘<a class=property
|
|
href="#visibility">visibility</a>’ 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
|
|
‘<a class=property href="#float">float</a>’ is not
|
|
‘<code class=css><a href="#none0">none</a></code>’ 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 ‘<a class=property
|
|
href="#position">position</a>’ 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 ‘<a class=property href="#display">display</a>’ is
|
|
‘<code class=css><a href="#none0">none</a></code>’, then
|
|
‘<a class=property href="#float">float</a>’ and ‘<a
|
|
class=property href="#position">position</a>’ do not apply.
|
|
|
|
<li>Otherwise, if ‘<a class=property
|
|
href="#position">position</a>’ is neither ‘<code
|
|
class=css>static</code>’ nor ‘<code
|
|
class=css>relative</code>’, then ‘<a class=property
|
|
href="#display">display</a>’ is set according to the table above.
|
|
(And float does not apply.)
|
|
|
|
<li>Otherwise, if float is not ‘<code class=css><a
|
|
href="#none0">none</a></code>’, then ‘<a class=property
|
|
href="#display">display</a>’ is set according to the table above.
|
|
|
|
<li>Otherwise, if the element is the root element, then ‘<a
|
|
class=property href="#display">display</a>’ is set according to
|
|
the table above.
|
|
|
|
<li>Otherwise, the computed value of ‘<a class=property
|
|
href="#display">display</a>’ 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 ‘<a class=property
|
|
href="#display">display</a>’ of ‘<code class=css><a
|
|
href="#block">block</a></code>’, ‘<code class=css><a
|
|
href="#list-item">list-item</a></code>’, ‘<code class=css><a
|
|
href="#table">table</a></code>’, ‘<code
|
|
class=css>table-*</code>’ (i.e., all table boxes) or <var><a
|
|
href="#lttemplategt"><template></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 ‘<a class=property
|
|
href="#display">display</a>’ of ‘<code class=css><a
|
|
href="#inline">inline</a></code>’, ‘<code class=css><a
|
|
href="#inline-block">inline-block</a></code>’, ‘<code
|
|
class=css><a href="#inline-table">inline-table</a></code>’ or
|
|
‘<code class=css><a href="#ruby">ruby</a></code>’. <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
|
|
‘<a class=property href="#display">display</a>’, 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 ‘<a class=property href="#display">display</a>’, 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 ‘<a class=property href="#display">display</a>’
|
|
of ‘<code class=css><a href="#block">block</a></code>’.
|
|
</ul>
|
|
|
|
<div class=example>
|
|
<p>An example of the last point above is this document fragment:</p>
|
|
|
|
<pre><p>Somebody whose name I have
|
|
forgotten, said, long ago: <q>a box is
|
|
a box,</q> and he probably meant it.</p></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: “Somebody…”
|
|
|
|
<li>line box: “forgotten…”
|
|
</ul>
|
|
|
|
<li>block-level box [q]
|
|
<ul>
|
|
<li>line box: “a box…”
|
|
</ul>
|
|
|
|
<li>block-level box [anonymous]
|
|
<ul>
|
|
<li>line box: “and he…”
|
|
</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 ‘<a class=property
|
|
href="#direction">direction</a>’ and ‘<a class=property
|
|
href="#block-progression">block-progression</a>’ 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 ‘<a class=property
|
|
href="#direction">direction</a>’ and ‘<a class=property
|
|
href="#block-progression">block-progression</a>’ 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 ‘<a class=property
|
|
href="#direction">direction</a>’ and ‘<a class=property
|
|
href="#block-progression">block-progression</a>’ 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 ‘<a class=property
|
|
href="#position">position</a>’ property is neither ‘<code
|
|
class=css>static</code>’ nor ‘<code
|
|
class=css>relative</code>’, 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 ‘<a class=property href="#float">float</a>’
|
|
is not ‘<code class=css><a href="#none0">none</a></code>’.
|
|
|
|
<li>The <em><a href="#used-value.">used value</a></em> of ‘<a
|
|
class=property href="#overflow0">overflow</a>’ is not ‘<code
|
|
class=css><a href="#visible0">visible</a></code>’.
|
|
|
|
<li>The value of ‘<a class=property
|
|
href="#display">display</a>’ is ‘<code class=css><a
|
|
href="#table-cell">table-cell</a></code>’, ‘<code
|
|
class=css><a href="#table-caption">table-caption</a></code>’ (see
|
|
<a href="#CSS3TBL" rel=biblioentry>[CSS3TBL]<!--{{CSS3TBL}}--></a>),
|
|
‘<code class=css><a
|
|
href="#inline-block">inline-block</a></code>’ or ‘<code
|
|
class=css><a href="#inline-table">inline-table</a></code>’.
|
|
|
|
<li>The value of ‘<a class=property
|
|
href="#position">position</a>’ is neither ‘<code
|
|
class=css>static</code>’ nor ‘<code
|
|
class=css>relative</code>’ (see <a href="#CSS3POS"
|
|
rel=biblioentry>[CSS3POS]<!--{{CSS3POS}}--></a>).
|
|
|
|
<li>The value of ‘<a class=property
|
|
href="#block-progression">block-progression</a>’ is ‘<code
|
|
class=css>lr</code>’ or ‘<code class=css>rl</code>’ and
|
|
the value of ‘<a class=property
|
|
href="#block-progression">block-progression</a>’ of its parent box
|
|
is ‘<code class=css>tb</code>’
|
|
|
|
<li>The value of ‘<a class=property
|
|
href="#block-progression">block-progression</a>’ is ‘<code
|
|
class=css>tb</code>’ and the value of ‘<a class=property
|
|
href="#block-progression">block-progression</a>’ of its parent box
|
|
is ‘<code class=css>lr</code>’ or ‘<code
|
|
class=css>rl</code>’.
|
|
</ul>
|
|
|
|
<p class=note>Note that an element with ‘<code class=css>display:
|
|
inline</code>’ therefore cannot be a flow root: it doesn't float
|
|
(otherwise its ‘<a class=property href="#display">display</a>’
|
|
would be ‘<code class=css><a href="#block">block</a></code>’),
|
|
and neither ‘<a class=property href="#overflow0">overflow</a>’
|
|
nor ‘<a class=property
|
|
href="#block-progression">block-progression</a>’ 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 ‘<code class=css><a
|
|
href="#table-caption">table-caption</a></code>’, ‘<code
|
|
class=css><a href="#table-cell">table-cell</a></code>’, and
|
|
‘<a class=property href="#position">position</a>’ 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 ‘<a class=property
|
|
href="#display">display</a>’ is ‘<code class=css><a
|
|
href="#block">block</a></code>’, ‘<code class=css><a
|
|
href="#list-item">list-item</a></code>’, ‘<code class=css><a
|
|
href="#table">table</a></code>’ or <var><a
|
|
href="#lttemplategt"><template></a></var>.
|
|
|
|
<li>The used value of its ‘<a class=property
|
|
href="#float">float</a>’ is ‘<code class=css><a
|
|
href="#none0">none</a></code>’.
|
|
|
|
<li>The used value of its ‘<a class=property
|
|
href="#position">position</a>’ is ‘<code
|
|
class=css>static</code>’ or ‘<code
|
|
class=css>relative</code>’.
|
|
|
|
<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><div class=sidebar>
|
|
<p>Text in a sidebar.
|
|
<p>Here is quote:
|
|
<blockquote lang=ja>
|
|
<p>...
|
|
</blockquote>
|
|
<p>Etc. etc.
|
|
</div> </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 ‘<code class=css><a
|
|
href="#inline-block">inline-block</a></code>’, e.g.
|
|
|
|
<p>The boxes of a flow are laid out inside their flow root one after the
|
|
other in the direction of the ‘<a class=property
|
|
href="#block-progression">block-progression</a>’ 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 ‘<code class=css>tb</code>’), or its top and
|
|
bottom margin edges coincide with the top and bottom content edges of its
|
|
containing block (if the flow root is ‘<code
|
|
class=css>rl</code>’ or ‘<code class=css>lr</code>’).
|
|
|
|
<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 ‘<code class=css><a href="#run-in">run-in</a></code>’ box
|
|
is useful for run-in headers, as in this example:</p>
|
|
|
|
<pre>
|
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
|
<HTML>
|
|
<HEAD>
|
|
<TITLE>A run-in box example</TITLE>
|
|
<STYLE type="text/css">
|
|
H3 { display: run-in }
|
|
</STYLE>
|
|
</HEAD>
|
|
<BODY>
|
|
<H3>A run-in heading.</H3>
|
|
<P>And a paragraph of text that
|
|
follows it.
|
|
</BODY>
|
|
</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"><length></a></var> |
|
|
<var><percentage></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"><length></a></var> |
|
|
<var><percentage></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><length>
|
|
|
|
<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>‘<a class=property href="#padding1">Padding</a>’ is a
|
|
shorthand for the other four properties. If ‘<a class=property
|
|
href="#padding1">padding</a>’ 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 ‘<a class=property
|
|
href="#padding-top">padding-top</a>’ and ‘<a class=property
|
|
href="#padding-bottom">padding-bottom</a>’ 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"><length></a></var> |
|
|
<var><percentage></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 ‘<code
|
|
class=css>auto</code>’
|
|
|
|
<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"><length></a></var> |
|
|
<var><percentage></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>‘<a class=property href="#margin1">Margin</a>’ is a
|
|
shorthand for the other four. If ‘<a class=property
|
|
href="#margin1">margin</a>’ 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">“Calculating widths, heights and
|
|
margins.”</a>
|
|
|
|
<p class=note>Note that in a <span>horizontal flow,</span> percentages on
|
|
‘<a class=property href="#margin-top">margin-top</a>’ and
|
|
‘<a class=property href="#margin-bottom">margin-bottom</a>’
|
|
are relative to the <em><a href="#width">width</a></em> of the containing
|
|
block, not the height (and in vertical flow, ‘<a class=property
|
|
href="#margin-left">margin-left</a>’ and ‘<a class=property
|
|
href="#margin-right">margin-right</a>’ 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 “collapse.” 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 }
|
|
...
|
|
<p>First paragraph</p>
|
|
<div>
|
|
<p>Second paragraph</p>
|
|
</div></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 }
|
|
...
|
|
<p>First paragraph</p>
|
|
<div>
|
|
<p>Second paragraph</p>
|
|
</div></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><p>First paragraph
|
|
<p>Second paragraph
|
|
<p>
|
|
<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 ‘<a class=property
|
|
href="#overflow0">overflow</a>’ other than ‘<code
|
|
class=css><a href="#visible0">visible</a></code>’ 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 ‘<code class=css><a
|
|
href="#inline-block">inline-block</a></code>’ 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 ‘<code
|
|
class=css>tb</code>’.</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 ‘<code
|
|
class=css>tb</code>’. <!-- 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 ‘<code
|
|
class=css>rl</code>’ or ‘<code class=css>lr</code>’.
|
|
<!-- 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 ‘<code
|
|
class=css>rl</code>’ or ‘<code class=css>lr</code>’.
|
|
<!-- 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
|
|
‘<code class=css>tb</code>’. <!-- 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 ‘<code
|
|
class=css>rl</code>’ or ‘<code class=css>lr</code>’.
|
|
<!-- self / horizontal --></p>
|
|
|
|
<li>
|
|
<p>The top and bottom margins of a box A collapse if the margins are
|
|
adjoining and the box is ‘<code class=css>tb</code>’. (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 ‘<code
|
|
class=css>rl</code>’ or ‘<code class=css>lr</code>’.</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 ‘<code class=css>rl</code>’:
|
|
<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 ‘<code class=css>lr</code>’:
|
|
<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>
|
|
<p style="margin-bottom: 2em">The bottom margin of this
|
|
box…</p>
|
|
|
|
<p style="margin-top: 3em">… collapses with the top margin
|
|
of this box, to yield max(2em, 3em) = 3em margin.</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>
|
|
<div style="margin-top: 2em; padding: 0; border: 0">
|
|
<p style="margin-top: 3em">
|
|
The top margin of the DIV and the P
|
|
collapse, to yield max(2em, 3em) = 3em margin.
|
|
</p>
|
|
</div>
|
|
</pre>
|
|
|
|
<p>The bottom margin of an in-flow block-level element with a ‘<a
|
|
class=property href="#height">height</a>’ of ‘<code
|
|
class=css>auto</code>’ and ‘<a class=property
|
|
href="#min-height">min-height</a>’ less than the element's used
|
|
height and ‘<a class=property
|
|
href="#max-height">max-height</a>’ 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>
|
|
<div style="margin-bottom: 2em; padding: 0; border: 0;
|
|
height: auto; min-height: 0; max-height: 100em">
|
|
<p style="margin-bottom: 3em">
|
|
The bottom margin of the DIV and the P collapse, to yield max(2em,
|
|
3em) = 3em margin.
|
|
</p>
|
|
</div>
|
|
</pre>
|
|
|
|
<p>An element's own margins are adjoining if the ‘<a class=property
|
|
href="#min-height">min-height</a>’ property is zero, and it has
|
|
neither vertical borders nor vertical padding, and it has a ‘<a
|
|
class=property href="#height">height</a>’ of either 0 or
|
|
‘<code class=css>auto</code>’, and it does not contain a line
|
|
box, and all of its in-flow children's margins (if any) are adjoining:</p>
|
|
|
|
<pre>
|
|
<div style="margin-top: 2em; margin-bottom: 3em">
|
|
<p style="position: absolute">
|
|
The DIV is empty and its top and bottom margins collapse.
|
|
</p>
|
|
</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>
|
|
<div style="margin-bottom: 2em">
|
|
<p style="float: left">
|
|
The margins of the next two Ps collapse
|
|
<p style="clear: left; margin-top: 4em; margin-bottom: 3em">
|
|
<!-- empty -->
|
|
</p>
|
|
<p style="margin-top: 1em; margin-bottom: 1em">
|
|
<!-- empty -->
|
|
</p>
|
|
</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…</p>
|
|
</div>
|
|
|
|
<p>Collapsing is based on the used value of ‘<a class=property
|
|
href="#padding1">padding</a>’, ‘<a class=property
|
|
href="#margin1">margin</a>’, and ‘<a class=property
|
|
href="#border1">border</a>’ (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 ‘<a class=property
|
|
href="#width">width</a>’ and ‘<a class=property
|
|
href="#height">height</a>’ properties</h2>
|
|
|
|
<table class=propdef id=namewidth>
|
|
<tbody>
|
|
<tr>
|
|
<td>Name:
|
|
|
|
<td><dfn id=width>width</dfn>
|
|
|
|
<tr>
|
|
<td>Value:
|
|
|
|
<td><var><length></var> | <var><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 ‘<code class=css>auto</code>’ as
|
|
specified or the absolute length; ‘<code
|
|
class=css>auto</code>’ 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><length></var> | <var><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 ‘<code class=css>auto</code>’ (see
|
|
prose under <percentage>) or the absolute length; ‘<code
|
|
class=css>auto</code>’ 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
|
|
‘<span class=property>box-sizing</span>’) of certain boxes.
|
|
|
|
<p>Values have the following meanings:
|
|
|
|
<dl>
|
|
<dt><var><length></var>
|
|
|
|
<dd>Specifies the width of the content area using a length unit.
|
|
|
|
<dt><var><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 ‘<code class=css>auto</code>’, 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 ‘<a class=property
|
|
href="#min-width">min-width</a>’, ‘<a class=property
|
|
href="#max-width">max-width</a>’, ‘<a class=property
|
|
href="#min-height">min-height</a>’ and ‘<a class=property
|
|
href="#max-height">max-height</a>’ 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"><length></a></var> |
|
|
<var><percentage></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"><length></a></var> |
|
|
<var><percentage></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 ‘<code
|
|
class=css><a href="#none0">none</a></code>’
|
|
</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"><length></a></var>
|
|
|
|
<dd>Specifies a fixed minimum or maximum for ‘<a class=property
|
|
href="#width">width</a>’ or ‘<a class=property
|
|
href="#height">height</a>’.
|
|
|
|
<dt><var><percentage></var>
|
|
|
|
<dd>Specifies a minimum or maximum for ‘<a class=property
|
|
href="#width">width</a>’ or ‘<a class=property
|
|
href="#height">height</a>’ 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 ‘<a class=property href="#width">width</a>’
|
|
and ‘<a class=property href="#height">height</a>’ respectively
|
|
and also the used values of the ‘<a class=property
|
|
href="#margin1">margin</a>’ properties and of ‘<a
|
|
class=property href="#top">top</a>’, ‘<a class=property
|
|
href="#right">right</a>’ ‘<a class=property
|
|
href="#bottom">bottom</a>’ and ‘<a class=property
|
|
href="#left">left</a>’.
|
|
|
|
<p class=note>Note that they do not affect the computed values of ‘<a
|
|
class=property href="#width">width</a>’ and ‘<a class=property
|
|
href="#height">height</a>’. 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 ‘<a class=property href="#width">width</a>’:
|
|
|
|
<ol>
|
|
<li>The tentative used width is calculated (without ‘<a
|
|
class=property href="#min-width">min-width</a>’, and ‘<a
|
|
class=property href="#max-width">max-width</a>’) following the
|
|
rules in the subsections below.
|
|
|
|
<li>If the tentative used width is greater than ‘<a class=property
|
|
href="#max-width">max-width</a>’, the same rules are applied again,
|
|
but this time using the computed value of ‘<a class=property
|
|
href="#max-width">max-width</a>’ as the computed value for 'width.
|
|
|
|
<li>If the resulting width is smaller than ‘<a class=property
|
|
href="#min-width">min-width</a>’, the same rules are applied again,
|
|
but this time using the computed value of ‘<a class=property
|
|
href="#min-width">min-width</a>’ as the computed value for
|
|
‘<a class=property href="#width">width</a>’.
|
|
</ol>
|
|
|
|
<p>For ‘<a class=property href="#height">height</a>’:
|
|
|
|
<ol>
|
|
<li>The tentative used height is calculated (without ‘<a
|
|
class=property href="#min-height">min-height</a>’, and ‘<a
|
|
class=property href="#max-height">max-height</a>’) following the
|
|
rules under <a href="#Calculating"> “Calculating widths, heights and
|
|
margins”</a> below.
|
|
|
|
<li>If the tentative used height is greater than ‘<a class=property
|
|
href="#max-height">max-height</a>’, the same rules are applied
|
|
again, but this time using the computed value of ‘<a class=property
|
|
href="#max-height">max-height</a>’ as the computed value for
|
|
'height.
|
|
|
|
<li>If the resulting height is smaller than ‘<a class=property
|
|
href="#min-height">min-height</a>’, the same rules are applied
|
|
again, but this time using the computed value of ‘<a class=property
|
|
href="#min-height">min-height</a>’ as the computed value for
|
|
‘<a class=property href="#height">height</a>’.
|
|
</ol>
|
|
|
|
<p>However, for replaced elements with an intrinsic ratio and both
|
|
‘<a class=property href="#width">width</a>’ and ‘<a
|
|
class=property href="#height">height</a>’ specified as ‘<code
|
|
class=css>auto</code>’, 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> ≤ <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 ‘<a class=property
|
|
href="#min-width">min-width</a>’, ‘<a class=property
|
|
href="#min-height">min-height</a>’, ‘<a class=property
|
|
href="#max-width">max-width</a>’ and ‘<a class=property
|
|
href="#max-height">max-height</a>’ 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 > max-width</var>
|
|
|
|
<td><var><a href="#max-width">max-width</a></var>
|
|
|
|
<td><var>max(max-width * h/w, min-height)</var>
|
|
|
|
<tr>
|
|
<td><var>w < min-width</var>
|
|
|
|
<td><var><a href="#min-width">min-width</a></var>
|
|
|
|
<td><var>min(min-width * h/w, max-height)</var>
|
|
|
|
<tr>
|
|
<td><var>h > max-height</var>
|
|
|
|
<td><var>max(max-height * w/h, min-width)</var>
|
|
|
|
<td><var><a href="#max-height">max-height</a></var>
|
|
|
|
<tr>
|
|
<td><var>h < min-height</var>
|
|
|
|
<td><var>min(min-height * w/h, max-width)</var>
|
|
|
|
<td><var><a href="#min-height">min-height</a></var>
|
|
|
|
<tr>
|
|
<td>(<var>w > max-width</var>) and
|
|
(<var>h > max-height</var>), where
|
|
(<var>max-width/w ≤ max-height/h</var>)
|
|
|
|
<td><var><a href="#max-width">max-width</a></var>
|
|
|
|
<td><var>max(min-height, max-width * h/w)</var>
|
|
|
|
<tr>
|
|
<td>(<var>w > max-width</var>) and
|
|
(<var>h > max-height</var>), where
|
|
(<var>max-width/w > max-height/h</var>)
|
|
|
|
<td><var>max(min-width, max-height * w/h)</var>
|
|
|
|
<td><var><a href="#max-height">max-height</a></var>
|
|
|
|
<tr>
|
|
<td>(<var>w < min-width</var>) and
|
|
(<var>h < min-height</var>), where
|
|
(<var>min-width/w ≤ min-height/h</var>)
|
|
|
|
<td><var>min(max-width, min-height * w/h)</var>
|
|
|
|
<td><var><a href="#min-height">min-height</a></var>
|
|
|
|
<tr>
|
|
<td>(<var>w < min-width</var>) and
|
|
(<var>h < min-height</var>), where
|
|
(<var>min-width/w > min-height/h</var>)
|
|
|
|
<td><var><a href="#min-width">min-width</a></var>
|
|
|
|
<td><var>min(max-height, min-width * h/w)</var>
|
|
|
|
<tr>
|
|
<td>(<var>w < min-width</var>) and
|
|
(<var>h > 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 > max-width</var>) and
|
|
(<var>h < 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
|
|
‘<a class=property href="#width">width</a>’ and ‘<a
|
|
class=property href="#height">height</a>’ were computed as these
|
|
values.
|
|
|
|
<p class=note>Note that some values of the ‘<a class=property
|
|
href="#image-scaling">image-scaling</a>’ property (<a
|
|
href="#CSS3PAGE" rel=biblioentry>[CSS3PAGE]<!--{{CSS3PAGE}}--></a>) may
|
|
further change the used values of ‘<a class=property
|
|
href="#width">width</a>’ and ‘<a class=property
|
|
href="#height">height</a>’.
|
|
|
|
<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 ‘<a class=property href="#width">width</a>’ and
|
|
‘<a class=property href="#height">height</a>’ properties do
|
|
not apply. For each of ‘<a class=property
|
|
href="#left">left</a>’, ‘<a class=property
|
|
href="#right">right</a>’, ‘<a class=property
|
|
href="#top">top</a>’, ‘<a class=property
|
|
href="#bottom">bottom</a>’, ‘<a class=property
|
|
href="#margin-left">margin-left</a>’, ‘<a class=property
|
|
href="#margin-right">margin-right</a>’, ‘<a class=property
|
|
href="#margin-top">margin-top</a>’ and ‘<a class=property
|
|
href="#margin-bottom">margin-bottom</a>’, the used value is equal to
|
|
the computed value, except that a computed value of ‘<code
|
|
class=css>auto</code>’ becomes a used value of ‘<code
|
|
class=css>0</code>’.
|
|
|
|
<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 ‘<a class=property
|
|
href="#margin-left">margin-left</a>’, ‘<a class=property
|
|
href="#margin-right">margin-right</a>’, ‘<a class=property
|
|
href="#margin-top">margin-top</a>’ and ‘<a class=property
|
|
href="#margin-bottom">margin-bottom</a>’ are equal to the computed
|
|
value, except that a computed value of ‘<code
|
|
class=css>auto</code>’ becomes a used value of ‘<code
|
|
class=css>0</code>’.
|
|
|
|
<p>If ‘<a class=property href="#height">height</a>’ and
|
|
‘<a class=property href="#width">width</a>’ both have computed
|
|
values of ‘<code class=css>auto</code>’ and the element also
|
|
has an intrinsic width, then that intrinsic width is the used value of
|
|
‘<a class=property href="#width">width</a>’.
|
|
|
|
<p>If ‘<a class=property href="#height">height</a>’ and
|
|
‘<a class=property href="#width">width</a>’ both have computed
|
|
values of ‘<code class=css>auto</code>’ and the element also
|
|
has an intrinsic height, then that intrinsic height is the used value of
|
|
‘<a class=property href="#height">height</a>’.
|
|
|
|
<p>If ‘<a class=property href="#height">height</a>’ and
|
|
‘<a class=property href="#width">width</a>’ both have computed
|
|
values of ‘<code class=css>auto</code>’ and the element has no
|
|
intrinsic width, but does have an intrinsic height and intrinsic ratio; or
|
|
if ‘<a class=property href="#width">width</a>’ has a computed
|
|
value of ‘<code class=css>auto</code>’, ‘<a
|
|
class=property href="#height">height</a>’ has some other computed
|
|
value, and the element has an intrinsic ratio; then the used value of
|
|
‘<a class=property href="#width">width</a>’ is:
|
|
|
|
<blockquote>
|
|
<p>(used height) * (intrinsic ratio)
|
|
</blockquote>
|
|
|
|
<p>If ‘<a class=property href="#height">height</a>’ and
|
|
‘<a class=property href="#width">width</a>’ both have computed
|
|
values of ‘<code class=css>auto</code>’ and the element has no
|
|
intrinsic height, but does have an intrinsic width and intrinsic ratio; or
|
|
if ‘<a class=property href="#height">height</a>’ has a
|
|
computed value of ‘<code class=css>auto</code>’, ‘<a
|
|
class=property href="#width">width</a>’ has some other computed
|
|
value, and the element has an intrinsic ratio; then the used value of
|
|
‘<a class=property href="#height">height</a>’ is:
|
|
|
|
<blockquote>
|
|
<p>(used width) / (intrinsic ratio)
|
|
</blockquote>
|
|
|
|
<p>If ‘<a class=property href="#height">height</a>’ and
|
|
‘<a class=property href="#width">width</a>’ both have computed
|
|
values of ‘<code class=css>auto</code>’ 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 ‘<a class=property href="#width">width</a>’
|
|
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 ‘<a class=property
|
|
href="#height">height</a>’ is: (used width) / (intrinsic ratio).
|
|
|
|
<p>If ‘<a class=property href="#width">width</a>’ has a
|
|
computed value of ‘<span class=property>auto</span>’, but none
|
|
of the conditions above are met, then the used value of ‘<a
|
|
class=property href="#width">width</a>’ 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 ‘<a class=property href="#height">height</a>’ has a
|
|
computed value of ‘<span class=property>auto</span>’ and none
|
|
of the rules above define its used value, then the used value of ‘<a
|
|
class=property href="#height">height</a>’ 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 ‘<a class=property
|
|
href="#overflow0">overflow</a>’ computes to ‘<code
|
|
class=css><a href="#visible0">visible</a></code>’</h3>
|
|
|
|
<p>This section also applies to <a href="#block-level">block-level</a>
|
|
non-replaced elements in normal flow when ‘<a class=property
|
|
href="#overflow0">overflow</a>’ does not compute to ‘<code
|
|
class=css><a href="#visible0">visible</a></code>’ 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>‘<a class=property href="#margin-left">margin-left</a>’ +
|
|
‘<a class=property
|
|
href="#border-left-width">border-left-width</a>’ + ‘<a
|
|
class=property href="#padding-left">padding-left</a>’ + ‘<a
|
|
class=property href="#width">width</a>’ + ‘<a class=property
|
|
href="#padding-right">padding-right</a>’ + ‘<a class=property
|
|
href="#border-right-width">border-right-width</a>’ + ‘<a
|
|
class=property href="#margin-right">margin-right</a>’ + scrollbar
|
|
width (if any) = width of containing block
|
|
</blockquote>
|
|
|
|
<p>If ‘<a class=property href="#width">width</a>’ is not
|
|
‘<code class=css>auto</code>’ and ‘<a class=property
|
|
href="#border-left-width">border-left-width</a>’ + ‘<a
|
|
class=property href="#padding-left">padding-left</a>’ + ‘<a
|
|
class=property href="#width">width</a>’ + ‘<a class=property
|
|
href="#padding-right">padding-right</a>’ + ‘<a class=property
|
|
href="#border-right-width">border-right-width</a>’ + scrollbar width
|
|
(if any) (plus any of ‘<a class=property
|
|
href="#margin-left">margin-left</a>’ or ‘<a class=property
|
|
href="#margin-right">margin-right</a>’ that are not ‘<code
|
|
class=css>auto</code>’) is larger than the width of the containing
|
|
block, then any ‘<code class=css>auto</code>’ values for
|
|
‘<a class=property href="#margin-left">margin-left</a>’ or
|
|
‘<a class=property href="#margin-right">margin-right</a>’ 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
|
|
‘<code class=css>auto</code>’ have a used value equal to the
|
|
computed value, except if they all have a computed value other than
|
|
‘<code class=css>auto</code>’. 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 ‘<a class=property
|
|
href="#direction">direction</a>’ property of the containing block
|
|
has the value ‘<code class=css>ltr</code>’, the specified
|
|
value of ‘<a class=property
|
|
href="#margin-right">margin-right</a>’ is ignored and the value is
|
|
calculated so as to make the equality true. If the value of ‘<a
|
|
class=property href="#direction">direction</a>’ is ‘<code
|
|
class=css>rtl</code>’, this happens to ‘<a class=property
|
|
href="#margin-left">margin-left</a>’ instead.
|
|
|
|
<p>If there is exactly one value specified as ‘<code
|
|
class=css>auto</code>’, its used value follows from the equality.
|
|
|
|
<p>If ‘<a class=property href="#width">width</a>’ is set to
|
|
‘<code class=css>auto</code>’, any other ‘<code
|
|
class=css>auto</code>’ values become ‘<code
|
|
class=css>0</code>’ and ‘<a class=property
|
|
href="#width">width</a>’ follows from the resulting equality.
|
|
|
|
<p>If both ‘<a class=property
|
|
href="#margin-left">margin-left</a>’ and ‘<a class=property
|
|
href="#margin-right">margin-right</a>’ are ‘<code
|
|
class=css>auto</code>’, 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
|
|
‘<a class=property href="#overflow0">overflow</a>’ property.
|
|
|
|
<p>If ‘<a class=property href="#margin-top">margin-top</a>’, or
|
|
‘<a class=property href="#margin-bottom">margin-bottom</a>’
|
|
are ‘<code class=css>auto</code>’, their used value is 0. If
|
|
‘<a class=property href="#height">height</a>’ is ‘<code
|
|
class=css>auto</code>’, 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 ‘<a class=property
|
|
href="#overflow0">overflow</a>’ does not compute to ‘<code
|
|
class=css><a href="#visible0">visible</a></code>’ (except if the
|
|
‘<a class=property href="#overflow0">overflow</a>’ 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 ‘<a
|
|
class=property href="#height">height</a>’, ‘<a class=property
|
|
href="#margin-top">margin-top</a>’ and ‘<a class=property
|
|
href="#margin-bottom">margin-bottom</a>’.
|
|
|
|
<p>If ‘<a class=property href="#margin-top">margin-top</a>’, or
|
|
‘<a class=property href="#margin-bottom">margin-bottom</a>’
|
|
are ‘<code class=css>auto</code>’, their used value is 0. If
|
|
‘<a class=property href="#height">height</a>’ is ‘<code
|
|
class=css>auto</code>’, its used value is defined by <a
|
|
href="#root-height">“‘<code class=css>Auto</code>’ heights
|
|
for flow roots.”</a>
|
|
|
|
<h3 id=lsquo><span class=secno>9.5. </span>‘<a class=property
|
|
href="#inline-block">Inline-block</a>’ or floating, non-replaced
|
|
elements</h3>
|
|
|
|
<p>The used values of ‘<a class=property
|
|
href="#margin-left">margin-left</a>’, ‘<a class=property
|
|
href="#margin-right">margin-right</a>’, ‘<a class=property
|
|
href="#margin-top">margin-top</a>’ and ‘<a class=property
|
|
href="#margin-bottom">margin-bottom</a>’ are their computed values,
|
|
except that a computed value of ‘<code class=css>auto</code>’
|
|
gives a used value of 0.
|
|
|
|
<p>The used value of ‘<a class=property
|
|
href="#width">width</a>’ is the computed value, unless that is
|
|
‘<code class=css>auto</code>’, when used value is the <a
|
|
href="#shrink-to-fit">shrink-to-fit</a> width.
|
|
|
|
<p>The used value of ‘<a class=property
|
|
href="#height">height</a>’ is the computed value, unless that is
|
|
‘<code class=css>auto</code>’, when the used value is defined
|
|
by <a href="#root-height">“‘<code class=css>Auto</code>’
|
|
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 ‘<a class=property
|
|
href="#left">left</a>’ 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 ‘<a class=property
|
|
href="#position">position</a>’ property had been ‘<code
|
|
class=css>static</code>’ and ‘<a class=property
|
|
href="#float">float</a>’ had been ‘<a class=property
|
|
href="#none0">none</a>’. The value is negative if the box's margin
|
|
is to the left of the containing block's edge.
|
|
|
|
<li>The static position for ‘<a class=property
|
|
href="#right">right</a>’ 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 ‘<a class=property
|
|
href="#top">top</a>’ 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 ‘<a class=property
|
|
href="#bottom">bottom</a>’ 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>‘<a class=property href="#left">left</a>’ + ‘<a
|
|
class=property href="#margin-left">margin-left</a>’ + ‘<a
|
|
class=property href="#border-left-width">border-left-width</a>’ +
|
|
‘<a class=property href="#padding-left">padding-left</a>’ +
|
|
‘<a class=property href="#width">width</a>’ + ‘<a
|
|
class=property href="#padding-right">padding-right</a>’ + ‘<a
|
|
class=property href="#border-right-width">border-right-width</a>’ +
|
|
‘<a class=property href="#margin-right">margin-right</a>’ +
|
|
‘<a class=property href="#right">right</a>’ + scrollbar width
|
|
(if any) = width of containing block
|
|
</blockquote>
|
|
|
|
<p>If all three of ‘<a class=property href="#left">left</a>’,
|
|
‘<a class=property href="#width">width</a>’, and ‘<a
|
|
class=property href="#right">right</a>’ are ‘<code
|
|
class=css>auto</code>’: First set any ‘<code
|
|
class=css>auto</code>’ values for ‘<a class=property
|
|
href="#margin-left">margin-left</a>’ and ‘<a class=property
|
|
href="#margin-right">margin-right</a>’ to 0. Then, if the ‘<a
|
|
class=property href="#direction">direction</a>’ property of the
|
|
containing block is ‘<code class=css>ltr</code>’ set ‘<a
|
|
class=property href="#left">left</a>’ to the <em><a
|
|
href="#static">static position</a></em> and apply rule number three below;
|
|
otherwise, set ‘<a class=property href="#right">right</a>’ to
|
|
the <em><a href="#static">static position</a></em> and apply rule number
|
|
one below.
|
|
|
|
<p>If none of the three is ‘<code class=css>auto</code>’: If
|
|
both ‘<a class=property href="#margin-left">margin-left</a>’
|
|
and ‘<a class=property href="#margin-right">margin-right</a>’
|
|
are ‘<code class=css>auto</code>’, 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 ‘<code class=css>ltr</code>’ (‘<code
|
|
class=css>rtl</code>’), set ‘<a class=property
|
|
href="#margin-left">margin-left</a>’ (‘<a class=property
|
|
href="#margin-right">margin-right</a>’) to zero and solve for
|
|
‘<a class=property href="#margin-right">margin-right</a>’
|
|
(‘<a class=property href="#margin-left">margin-left</a>’).
|
|
<span class=issue>Should we remove the phrase starting with
|
|
“unless”?</span> If one of ‘<a class=property
|
|
href="#margin-left">margin-left</a>’ or ‘<a class=property
|
|
href="#margin-right">margin-right</a>’ is ‘<code
|
|
class=css>auto</code>’, solve the equation for that value. If the
|
|
values are over-constrained, ignore the value for ‘<a class=property
|
|
href="#left">left</a>’ (in case the ‘<a class=property
|
|
href="#direction">direction</a>’ property of the containing block is
|
|
‘<code class=css>rtl</code>’) or ‘<a class=property
|
|
href="#right">right</a>’ (in case ‘<a class=property
|
|
href="#direction">direction</a>’ is ‘<code
|
|
class=css>ltr</code>’) and solve for that value.
|
|
|
|
<p>Otherwise, set ‘<code class=css>auto</code>’ values for
|
|
‘<a class=property href="#margin-left">margin-left</a>’ and
|
|
‘<a class=property href="#margin-right">margin-right</a>’ to
|
|
0, and pick the one of the following six rules that applies.
|
|
|
|
<ol>
|
|
<li>‘<a class=property href="#left">left</a>’ and ‘<a
|
|
class=property href="#width">width</a>’ are ‘<code
|
|
class=css>auto</code>’ and ‘<a class=property
|
|
href="#right">right</a>’ is not ‘<code
|
|
class=css>auto</code>’, then the width is <em><a
|
|
href="#shrink-to-fit0">shrink-to-fit.</a></em> Then solve for ‘<a
|
|
class=property href="#left">left</a>’.
|
|
|
|
<li>‘<a class=property href="#left">left</a>’ and ‘<a
|
|
class=property href="#right">right</a>’ are ‘<code
|
|
class=css>auto</code>’ and ‘<a class=property
|
|
href="#width">width</a>’ is not ‘<code
|
|
class=css>auto</code>’, then if the ‘<a class=property
|
|
href="#direction">direction</a>’ property of the containing block
|
|
is ‘<code class=css>ltr</code>’ set ‘<a class=property
|
|
href="#left">left</a>’ to the <em><a href="#static">static
|
|
position</a></em>, otherwise set ‘<a class=property
|
|
href="#right">right</a>’ to the <em><a href="#static">static
|
|
position</a></em>. Then solve for ‘<a class=property
|
|
href="#left">left</a>’ (if ‘<code class=css>direction is
|
|
</code>’'rtl‘<code class=css>) or ‘<a class=property
|
|
href="#right">right</a>’ (if ‘<a class=property
|
|
href="#direction">direction</a>’ is </code>’ltr'').
|
|
|
|
<li>‘<a class=property href="#width">width</a>’ and ‘<a
|
|
class=property href="#right">right</a>’ are ‘<code
|
|
class=css>auto</code>’ and ‘<a class=property
|
|
href="#left">left</a>’ is not ‘<code
|
|
class=css>auto</code>’, then the width is <em><a
|
|
href="#shrink-to-fit0">shrink-to-fit.</a></em> Then solve for ‘<a
|
|
class=property href="#right">right</a>’.
|
|
|
|
<li>‘<a class=property href="#left">left</a>’ is ‘<code
|
|
class=css>auto</code>’, ‘<a class=property
|
|
href="#width">width</a>’ and ‘<a class=property
|
|
href="#right">right</a>’ are not ‘<code
|
|
class=css>auto</code>’, then solve for ‘<a class=property
|
|
href="#left">left</a>’.
|
|
|
|
<li>‘<a class=property href="#width">width</a>’ is
|
|
‘<code class=css>auto</code>’, ‘<a class=property
|
|
href="#left">left</a>’ and ‘<a class=property
|
|
href="#right">right</a>’ are not ‘<code
|
|
class=css>auto</code>’, then solve for ‘<a class=property
|
|
href="#width">width</a>’.
|
|
|
|
<li>‘<a class=property href="#right">right</a>’ is
|
|
‘<code class=css>auto</code>’, ‘<a class=property
|
|
href="#left">left</a>’ and ‘<a class=property
|
|
href="#width">width</a>’ are not ‘<code
|
|
class=css>auto</code>’, then solve for ‘<a class=property
|
|
href="#right">right</a>’.
|
|
</ol>
|
|
|
|
<p>This constraint must also hold among the used values:
|
|
|
|
<blockquote>
|
|
<p>‘<a class=property href="#top">top</a>’ + ‘<a
|
|
class=property href="#margin-top">margin-top</a>’ + ‘<a
|
|
class=property href="#border-top-width">border-top-width</a>’ +
|
|
‘<a class=property href="#padding-top">padding-top</a>’ +
|
|
‘<a class=property href="#height">height</a>’ + ‘<a
|
|
class=property href="#padding-bottom">padding-bottom</a>’ +
|
|
‘<a class=property
|
|
href="#border-bottom-width">border-bottom-width</a>’ + ‘<a
|
|
class=property href="#margin-bottom">margin-bottom</a>’ + ‘<a
|
|
class=property href="#bottom">bottom</a>’ + scrollbar height (if
|
|
any) = height of containing block
|
|
</blockquote>
|
|
|
|
<p>If all three of ‘<a class=property href="#top">top</a>’,
|
|
‘<a class=property href="#height">height</a>’, and ‘<a
|
|
class=property href="#bottom">bottom</a>’ are ‘<code
|
|
class=css>auto</code>’, set ‘<a class=property
|
|
href="#top">top</a>’ to the static position and apply rule number
|
|
three below.
|
|
|
|
<p>If none of the three are ‘<code class=css>auto</code>’: If
|
|
both ‘<a class=property href="#margin-top">margin-top</a>’ and
|
|
‘<a class=property href="#margin-bottom">margin-bottom</a>’
|
|
are ‘<code class=css>auto</code>’, solve the equation under
|
|
the extra constraint that the two margins get equal values. If one of
|
|
‘<a class=property href="#margin-top">margin-top</a>’ or
|
|
‘<a class=property href="#margin-bottom">margin-bottom</a>’ is
|
|
‘<code class=css>auto</code>’, solve the equation for that
|
|
value. If the values are over-constrained, ignore the value for ‘<a
|
|
class=property href="#bottom">bottom</a>’ and solve for that value.
|
|
|
|
<p>Otherwise, pick the one of the following six rules that applies.
|
|
|
|
<ol>
|
|
<li>‘<a class=property href="#top">top</a>’ and ‘<a
|
|
class=property href="#height">height</a>’ are ‘<code
|
|
class=css>auto</code>’ and ‘<a class=property
|
|
href="#bottom">bottom</a>’ is not ‘<code
|
|
class=css>auto</code>’: The used value of ‘<a class=property
|
|
href="#bottom">bottom</a>’ is its computed value. The used height
|
|
is defined by <a href="#root-height">“‘<code
|
|
class=css>Auto</code>’ heights for flow roots.” </a> The used
|
|
values of ‘<a class=property
|
|
href="#margin-top">margin-top</a>’ and ‘<a class=property
|
|
href="#margin-bottom">margin-bottom</a>’ are their computed values,
|
|
except that any ‘<code class=css>auto</code>’ gives a used
|
|
value of 0. Finally, the constraint gives the used value of ‘<a
|
|
class=property href="#top">top</a>’.
|
|
|
|
<li>‘<a class=property href="#top">top</a>’ and ‘<a
|
|
class=property href="#bottom">bottom</a>’ are ‘<code
|
|
class=css>auto</code>’ and ‘<a class=property
|
|
href="#height">height</a>’ is not ‘<code
|
|
class=css>auto</code>’: The used value of ‘<a class=property
|
|
href="#top">top</a>’ is its <em><a href="#static">static
|
|
position.</a></em> The used values of ‘<a class=property
|
|
href="#margin-top">margin-top</a>’ and ‘<a class=property
|
|
href="#margin-bottom">margin-bottom</a>’ are their computed values,
|
|
except that any ‘<code class=css>auto</code>’ gives a used
|
|
value of 0. Finally, the constraint gives the used value for ‘<a
|
|
class=property href="#bottom">bottom</a>’.
|
|
|
|
<li>‘<a class=property href="#height">height</a>’ and
|
|
‘<a class=property href="#bottom">bottom</a>’ are
|
|
‘<code class=css>auto</code>’ and ‘<a class=property
|
|
href="#top">top</a>’ is not ‘<code
|
|
class=css>auto</code>’: The used height is defined by <a
|
|
href="#root-height">“‘<code class=css>Auto</code>’ heights
|
|
for flow roots.”</a> The used values of ‘<a class=property
|
|
href="#margin-top">margin-top</a>’ and ‘<a class=property
|
|
href="#margin-bottom">margin-bottom</a>’ are their computed values,
|
|
except that any ‘<code class=css>auto</code>’ gives a used
|
|
value of 0. Finally, the constraint gives the used value of ‘<a
|
|
class=property href="#bottom">bottom</a>’.
|
|
|
|
<li>‘<a class=property href="#top">top</a>’ is ‘<code
|
|
class=css>auto</code>’, ‘<a class=property
|
|
href="#height">height</a>’ and ‘<a class=property
|
|
href="#bottom">bottom</a>’ are not ‘<code
|
|
class=css>auto</code>’: The used values of ‘<a class=property
|
|
href="#margin-top">margin-top</a>’ and ‘<a class=property
|
|
href="#margin-bottom">margin-bottom</a>’ are their computed values,
|
|
except that any ‘<code class=css>auto</code>’ gives a used
|
|
value of 0. The constraint gives the used value for ‘<a
|
|
class=property href="#top">top</a>’.
|
|
|
|
<li>‘<a class=property href="#height">height</a>’ is
|
|
‘<code class=css>auto</code>’, ‘<a class=property
|
|
href="#top">top</a>’ and ‘<a class=property
|
|
href="#bottom">bottom</a>’ are not ‘<code
|
|
class=css>auto</code>’: The used values of ‘<a class=property
|
|
href="#margin-top">margin-top</a>’ and ‘<a class=property
|
|
href="#margin-bottom">margin-bottom</a>’ are their computed values,
|
|
except that any ‘<code class=css>auto</code>’ gives a used
|
|
value of 0. The constraint gives the used value for ‘<a
|
|
class=property href="#height">height</a>’.
|
|
|
|
<li>‘<a class=property href="#bottom">bottom</a>’ is
|
|
‘<code class=css>auto</code>’, ‘<a class=property
|
|
href="#top">top</a>’ and ‘<a class=property
|
|
href="#height">height</a>’ are not ‘<code
|
|
class=css>auto</code>’: The used values of ‘<a class=property
|
|
href="#margin-top">margin-top</a>’ and ‘<a class=property
|
|
href="#margin-bottom">margin-bottom</a>’ are their computed values,
|
|
except that any ‘<code class=css>auto</code>’ gives a used
|
|
value of 0. The constraint gives the used value for ‘<a
|
|
class=property href="#bottom">bottom</a>’.
|
|
</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 ‘<a class=property
|
|
href="#overflow0">overflow</a>’ 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 ‘<a class=property
|
|
href="#width">width</a>’ and ‘<a class=property
|
|
href="#height">height</a>’ is determined as for <a
|
|
href="#inline-replaced">inline replaced elements</a>.
|
|
|
|
<li>For each of ‘<a class=property href="#top">top</a>’,
|
|
‘<a class=property href="#right">right</a>’, ‘<a
|
|
class=property href="#bottom">bottom</a>’, ‘<a class=property
|
|
href="#left">left</a>’, ‘<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>’ and ‘<a
|
|
class=property href="#margin-left">margin-left</a>’, if the
|
|
computed value is not ‘<code class=css>auto</code>’, the used
|
|
value is equal to the computed value.
|
|
|
|
<li>If both ‘<a class=property href="#left">left</a>’ and
|
|
‘<a class=property href="#right">right</a>’ have the value
|
|
‘<code class=css>auto</code>’, then if ‘<a
|
|
class=property href="#direction">direction</a>’ of the containing
|
|
block is ‘<code class=css>ltr</code>’, the used value of
|
|
‘<a class=property href="#left">left</a>’ is its <em><a
|
|
href="#static">static position;</a></em> else if ‘<a class=property
|
|
href="#direction">direction</a>’ is ‘<code
|
|
class=css>rtl</code>’, the used value of ‘<a class=property
|
|
href="#right">right</a>’ is its <em><a href="#static">static
|
|
position.</a></em>
|
|
|
|
<li>If both ‘<a class=property href="#top">top</a>’ and
|
|
‘<a class=property href="#bottom">bottom</a>’ have the value
|
|
‘<code class=css>auto</code>’, then the used value of
|
|
‘<a class=property href="#top">top</a>’ is its <em><a
|
|
href="#static">static position.</a></em>
|
|
|
|
<li>If ‘<a class=property href="#left">left</a>’ or ‘<a
|
|
class=property href="#right">right</a>’ (or both) are ‘<code
|
|
class=css>auto</code>’, and ‘<a class=property
|
|
href="#margin-left">margin-left</a>’ is ‘<code
|
|
class=css>auto</code>’, then the used value of ‘<a
|
|
class=property href="#margin-left">margin-left</a>’ is 0.
|
|
|
|
<li>If ‘<a class=property href="#left">left</a>’ or ‘<a
|
|
class=property href="#right">right</a>’ (or both) are ‘<code
|
|
class=css>auto</code>’, and ‘<a class=property
|
|
href="#margin-right">margin-right</a>’ is ‘<code
|
|
class=css>auto</code>’, then the used value of ‘<a
|
|
class=property href="#margin-right">margin-right</a>’ is 0.
|
|
|
|
<li>If neither ‘<a class=property href="#left">left</a>’ nor
|
|
‘<a class=property href="#right">right</a>’ are ‘<code
|
|
class=css>auto</code>’ and both ‘<a class=property
|
|
href="#margin-left">margin-left</a>’ and ‘<a class=property
|
|
href="#margin-right">margin-right</a>’ are ‘<code
|
|
class=css>auto</code>’, then the used values satisfy the extra
|
|
constraint that ‘<a class=property
|
|
href="#margin-right">margin-right</a>’ and ‘<a class=property
|
|
href="#margin-left">margin-left</a>’ are equal, unless this would
|
|
make them negative, in which case when the direction of the containing
|
|
block is ‘<code class=css>ltr</code>’ (‘<code
|
|
class=css>rtl</code>’), the used value of ‘<a class=property
|
|
href="#margin-left">margin-left</a>’ (‘<a class=property
|
|
href="#margin-right">margin-right</a>’) 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>‘<a class=property href="#left">left</a>’ + ‘<a
|
|
class=property href="#margin-left">margin-left</a>’ + ‘<a
|
|
class=property href="#border-left-width">border-left-width</a>’ +
|
|
‘<a class=property href="#padding-left">padding-left</a>’ +
|
|
‘<a class=property href="#width">width</a>’ + ‘<a
|
|
class=property href="#padding-right">padding-right</a>’ + ‘<a
|
|
class=property href="#border-right-width">border-right-width</a>’ +
|
|
‘<a class=property href="#margin-right">margin-right</a>’ +
|
|
‘<a class=property href="#right">right</a>’ + scrollbar width
|
|
(if any) = width of containing block
|
|
|
|
<p>‘<a class=property href="#top">top</a>’ + ‘<a
|
|
class=property href="#margin-top">margin-top</a>’ + ‘<a
|
|
class=property href="#border-top-width">border-top-width</a>’ +
|
|
‘<a class=property href="#padding-top">padding-top</a>’ +
|
|
‘<a class=property href="#height">height</a>’ + ‘<a
|
|
class=property href="#padding-bottom">padding-bottom</a>’ +
|
|
‘<a class=property
|
|
href="#border-bottom-width">border-bottom-width</a>’ + ‘<a
|
|
class=property href="#margin-bottom">margin-bottom</a>’ + ‘<a
|
|
class=property href="#bottom">bottom</a>’ + scrollbar height (if
|
|
any) = height of containing block
|
|
</blockquote>
|
|
|
|
<p>If the first equation is over-constrained, ignore the value for either
|
|
‘<a class=property href="#left">left</a>’ (in case the
|
|
‘<a class=property href="#direction">direction</a>’ property
|
|
of the containing block is ‘<code class=css>rtl</code>’) or
|
|
‘<a class=property href="#right">right</a>’ (in case ‘<a
|
|
class=property href="#direction">direction</a>’ is ‘<code
|
|
class=css>ltr</code>’) and solve for that value.
|
|
|
|
<p>If the second equation is over-constrained, ignore the value for
|
|
‘<a class=property href="#bottom">bottom</a>’ 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 ‘<a class=property
|
|
href="#margin-left">margin-left</a>’ and ‘<a class=property
|
|
href="#margin-right">margin-right</a>’. 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 ‘<a class=property
|
|
href="#width">width</a>’, ‘<a class=property
|
|
href="#border1">border</a>’ and ‘<a class=property
|
|
href="#padding1">padding</a>’ 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 ‘<code
|
|
class=css>auto</code>’ are ‘<code class=css>0</code>’.
|
|
|
|
<p>The used value of ‘<a class=property
|
|
href="#width">width</a>’ is equal to the computed value, except that
|
|
if ‘<a class=property href="#width">width</a>’ is computed as
|
|
‘<code class=css>auto</code>’, the used value is the <em><a
|
|
href="#shrink-to-fit0">shrink-to-fit</a></em> width.
|
|
|
|
<p>If the computed value of ‘<a class=property
|
|
href="#height">height</a>’ is not ‘<code
|
|
class=css>auto</code>’, the used value is the computed value.
|
|
Otherwise the used height depends on the descendants, as defined in <a
|
|
href="#root-height">“‘<code class=css>Auto</code>’ heights
|
|
for flow roots.”</a>
|
|
|
|
<h3 id=root-height><span class=secno>9.10. </span>‘<code
|
|
class=css>Auto</code>’ 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 ‘<a
|
|
class=property href="#margin-left">margin-left</a>’, ‘<a
|
|
class=property href="#border-left-width">border-left-width</a>’,
|
|
‘<a class=property href="#padding-left">padding-left</a>’,
|
|
‘<a class=property href="#padding-right">padding-right</a>’,
|
|
‘<a class=property
|
|
href="#border-right-width">border-right-width</a>’, ‘<a
|
|
class=property href="#margin-right">margin-right</a>’, 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 ‘<a class=property href="#clear">clear</a>’
|
|
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; }
|
|
|
|
...
|
|
|
|
<p>
|
|
<span> </span>
|
|
Supercalifragilisticexpialidocious
|
|
</p>
|
|
</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 ‘<code
|
|
class=css>0</code>’):</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>
|
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
|
<HTML>
|
|
<HEAD>
|
|
<TITLE>Float example</TITLE>
|
|
<STYLE type="text/css">
|
|
IMG { float: left }
|
|
BODY, P, IMG { margin: 2em }
|
|
</STYLE>
|
|
</HEAD>
|
|
<BODY>
|
|
<P><IMG src=img.png alt="This image will illustrate floats">
|
|
Some sample text that has no other...
|
|
</BODY>
|
|
</HTML>
|
|
</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>
|
|
<BODY>
|
|
<P>Some sample text
|
|
<IMG src=img.png alt="This image will illustrate floats">
|
|
that has no other...
|
|
</BODY>
|
|
</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 ‘<a
|
|
class=property href="#clear">clear</a>’ 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 ‘<code class=css>clear:
|
|
left</code>’, which causes the second paragraph to be “pushed
|
|
down” to a position below the float – “clearance” is added
|
|
above its top margin to accomplish this (see the ‘<a
|
|
class=property href="#clear">clear</a>’ property).</p>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 id=the-lsquo1><span class=secno>10.2. </span>The ‘<a
|
|
class=property href="#float">float</a>’ 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"><page-floats></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><page-floats></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 ‘<a class=property
|
|
href="#float">float</a>’ other than ‘<code class=css><a
|
|
href="#none0">none</a></code>’ 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 ‘<a
|
|
class=property href="#overflow0">overflow</a>’ other than
|
|
‘<code class=css><a href="#visible0">visible</a></code>’) 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 ‘<a
|
|
class=property href="#clear">clear</a>’ 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 ‘<a class=property
|
|
href="#overflow0">overflow</a>’, ‘<a class=property
|
|
href="#overflow-x">overflow-x</a>’ and ‘<a class=property
|
|
href="#overflow-y">overflow-y</a>’ properties</h3>
|
|
|
|
<p class=issue>In the preceding sections, several things (such as flow
|
|
roots) depend on the value of ‘<a class=property
|
|
href="#overflow0">overflow</a>’. 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 ‘<code class=css><a
|
|
href="#inline-block">inline-block</a></code>’ 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 ‘<a class=property
|
|
href="#visible0">visible</a>’, 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 ‘<code class=css><a
|
|
href="#inline-block">inline-block</a></code>’ 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 ‘<a class=property
|
|
href="#visible0">visible</a>’, 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. ‘<a class=property
|
|
href="#overflow-x">Overflow-x</a>’ determines clipping at the left
|
|
and right edges, ‘<a class=property
|
|
href="#overflow-y">overflow-y</a>’ at the top and bottom edges.
|
|
|
|
<p>‘<a class=property href="#overflow0">Overflow</a>’ is a
|
|
shorthand. If it has one keyword, it sets both ‘<a class=property
|
|
href="#overflow-x">overflow-x</a>’ and ‘<a class=property
|
|
href="#overflow-y">overflow-y</a>’ to that keyword; if it has two,
|
|
it sets ‘<a class=property href="#overflow-x">overflow-x</a>’
|
|
to the first and ‘<a class=property
|
|
href="#overflow-y">overflow-y</a>’ 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 ‘<span class=property>print</span>’,
|
|
overflowing content may be printed.
|
|
|
|
<dt><dfn id=auto title="auto!!value of 'overflow'">auto</dfn>
|
|
|
|
<dd>The behavior of the ‘<code class=css>auto</code>’ 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 ‘<code class=css>display: none</code>’
|
|
were specified. [This idea is due to Till Halbach
|
|
<tillh@opera.com>, 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 ‘<code class=css>visibility:
|
|
hidden</code>’ were specified. [This idea is due to Till Halbach
|
|
<tillh@opera.com>, July 21, 2005]
|
|
</dl>
|
|
|
|
<p>Even if ‘<a class=property href="#overflow0">overflow</a>’
|
|
is set to ‘<code class=css><a
|
|
href="#visible0">visible</a></code>’, content may be clipped to a
|
|
UA's document window by the native operating environment.
|
|
|
|
<p>UAs must apply the ‘<a class=property
|
|
href="#overflow0">overflow</a>’ property set on the root element to
|
|
the viewport. HTML UAs must instead apply the ‘<a class=property
|
|
href="#overflow0">overflow</a>’ property from the BODY element to
|
|
the viewport, if the value on the HTML element is ‘<code
|
|
class=css><a href="#visible0">visible</a></code>’. The ‘<code
|
|
class=css><a href="#visible0">visible</a></code>’ value when used
|
|
for the viewport must be interpreted as ‘<code
|
|
class=css>auto</code>’. The element from which the value is
|
|
propagated must have a used value for ‘<a class=property
|
|
href="#overflow0">overflow</a>’ of ‘<code class=css><a
|
|
href="#visible0">visible</a></code>’.
|
|
|
|
<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 ‘<a class=property
|
|
href="#overflow0">overflow</a>’ other than ‘<code class=css><a
|
|
href="#visible0">visible</a></code>’ is a <em><a
|
|
href="#flow-root">flow root.</a></em>
|
|
|
|
<div class=example>
|
|
<p>Consider the following example of a block quotation (<blockquote>)
|
|
that is too big for its containing block (established by a <div>).
|
|
Here is the source:</p>
|
|
|
|
<pre>
|
|
<div>
|
|
<blockquote>
|
|
<p>I didn't like the play, but then I saw
|
|
it under adverse conditions - the curtain was up.</p>
|
|
<cite>- Groucho Marx</cite>
|
|
</blockquote>
|
|
</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 ‘<a class=property
|
|
href="#overflow0">overflow</a>’ is ‘<code class=css><a
|
|
href="#visible0">visible</a></code>’, so the <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 ‘<code class=css>overflow:
|
|
visible</code>’</p>
|
|
</div>
|
|
|
|
<p>Setting ‘<a class=property href="#overflow0">overflow</a>’
|
|
to ‘<code class=css><a href="#hidden0">hidden</a></code>’ for
|
|
the <div>, on the other hand, causes the <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 ‘<code class=css>overflow:
|
|
hidden</code>’</p>
|
|
</div>
|
|
|
|
<p>A value of ‘<a class=property href="#scroll">scroll</a>’
|
|
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>
|
|
<container>
|
|
<scroller>
|
|
<satellite/>
|
|
<body/>
|
|
</scroller>
|
|
</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, ‘<a
|
|
class=property href="#max-height">max-height</a>’ and ‘<code
|
|
class=css>overflow: auto</code>’ 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 ‘<a class=property
|
|
href="#max-height">max-height</a>’. 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 ‘<code
|
|
class=css>height: auto</code>’, but ‘<code
|
|
class=css>max-height: 5em</code>’. 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 }
|
|
...
|
|
<div id=d1>
|
|
<div id=d2>
|
|
This DIV has big margins.
|
|
</DIV>
|
|
</DIV>
|
|
</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 ‘<a class=property
|
|
href="#overflow-x">overflow-x</a>’ and ‘<a class=property
|
|
href="#overflow-y">overflow-y</a>’ are the same as their specified
|
|
values, except that some combinations with ‘<a class=property
|
|
href="#visible0">visible</a>’ are not possible: if one is specified
|
|
as ‘<a class=property href="#visible0">visible</a>’ and the
|
|
other is ‘<a class=property href="#scroll">scroll</a>’ or
|
|
‘<span class=property>auto</span>’, then ‘<a
|
|
class=property href="#visible0">visible</a>’ is set to ‘<span
|
|
class=property>auto</span>’. <span class=issue>The computed value of
|
|
‘<a class=property href="#overflow0">overflow</a>’ is equal to
|
|
the computed value of ‘<a class=property
|
|
href="#overflow-x">overflow-x</a>’ if ‘<a class=property
|
|
href="#overflow-y">overflow-y</a>’ is the same; otherwise it is the
|
|
pair of computed values of ‘<a class=property
|
|
href="#overflow-x">overflow-x</a>’ and ‘<a class=property
|
|
href="#overflow-y">overflow-y</a>’.</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 ‘<a class=property
|
|
href="#scroll">scroll</a>’ would tell UAs that support a visible
|
|
scrolling mechanism to display one so that users can access the clipped
|
|
content. The ‘<a class=property
|
|
href="#overflow-style">overflow-style</a>’ property lets an author
|
|
specify one or more preferred scrolling mechanism.
|
|
|
|
<p class=note>Note that ‘<a class=property
|
|
href="#overflow-x">overflow-x</a>’ and ‘<a class=property
|
|
href="#overflow-y">overflow-y</a>’ did not exist in CSS2.
|
|
|
|
<p class=note>Note that ‘<span
|
|
class=property>text-overflow</span>’ (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 ‘<a
|
|
class=property href="#overflow-style">overflow-style</a>’ 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 ‘<a class=property
|
|
href="#overflow0">overflow</a>’
|
|
|
|
<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 ‘<a class=property
|
|
href="#overflow0">overflow</a>’ property.) The value is either
|
|
‘<code class=css>auto</code>’, 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 ‘<code
|
|
class=css>auto</code>’.
|
|
|
|
<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
|
|
“thumb” 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 ‘<code class=css>move</code>’ 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 ‘<code
|
|
class=css>marquee</code>’) 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 ‘<code class=css>move</code>’ method
|
|
look like. The ‘<code class=css>marquee</code>’ method is
|
|
further defined <a href="#marquee">below.</a>
|
|
|
|
<p class=issue>Another idea is to make ‘<a class=property
|
|
href="#overflow0">overflow</a>’ a shorthand for ‘<a
|
|
class=property href="#overflow-style">overflow-style</a>’ and
|
|
overflow-policy, where overflow-policy has syntax “visible | hidden |
|
|
scroll | auto” and ‘<a class=property
|
|
href="#overflow0">overflow</a>’ has “<‘<span
|
|
class=property>overflow-policy</span>’> || <‘<a
|
|
class=property href="#overflow-style">overflow-style</a>’>”.
|
|
Then it is possible to write, e.g., ‘<code class=css>overflow: auto
|
|
marquee, scrollbar</code>’.
|
|
|
|
<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] [,
|
|
…]*
|
|
|
|
<li>overflow-style-y ditto
|
|
|
|
<li>overflow-policy-x: visible | hidden | scroll | auto
|
|
|
|
<li>overflow-policy-y ditto
|
|
|
|
<li>overflow-x: <overflow-style-x> || <overflow-policy-x>
|
|
|
|
<li>overflow-y ditto
|
|
|
|
<li>overflow: <overflow-x>
|
|
</ul>
|
|
|
|
<p>‘<a class=property href="#overflow0">overflow</a>’ is then
|
|
a shorthand that sets -x and -y to the same value. (‘<code
|
|
class=css>overflow: auto</code>’ is ambiguous, as is ‘<code
|
|
class=css>overflow: auto auto</code>’, 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 ‘<a class=property
|
|
href="#overflow0">overflow</a>’
|
|
|
|
<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 ‘<code class=css>bounce</code>’ a better name
|
|
than ‘<code class=css><a
|
|
href="#alternate">alternate</a></code>’?
|
|
|
|
<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><non-negative-integer></var> | infinite
|
|
|
|
<tr>
|
|
<td>Initial:
|
|
|
|
<td>1
|
|
|
|
<tr>
|
|
<td>Applies to:
|
|
|
|
<td>same as ‘<a class=property
|
|
href="#overflow0">overflow</a>’
|
|
|
|
<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 ‘<a class=property href="#marquee-loop">marquee-loop</a>’
|
|
is different for different states of the element, e.g., ‘<code
|
|
class=css>p {marquee-loop: 0} p:hover {marquee-loop:
|
|
infinite}</code>’, 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 ‘<a class=property href="#marquee-loop">marquee-loop</a>’
|
|
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 ‘<code class=css>infinite</code>’ a better
|
|
default than ‘<code class=css>1</code>’?
|
|
|
|
<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 ‘<a class=property
|
|
href="#overflow0">overflow</a>’
|
|
|
|
<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
|
|
‘<a class=property href="#direction">direction</a>’ and
|
|
‘<a class=property
|
|
href="#block-progression">block-progression</a>’ 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 ‘<code class=css>marquee-style:
|
|
alternate</code>’ moves content in the opposite direction on
|
|
even-numbered loops.
|
|
|
|
<div class=note>
|
|
<p>Note that ‘<code class=css>reverse</code>’ allows text to
|
|
be read in the normal order. E.g., in English text (‘<code
|
|
class=css>block-progression: tb</code>’ and ‘<code
|
|
class=css>direction: ltr</code>’), 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 ‘<a class=property
|
|
href="#overflow0">overflow</a>’
|
|
|
|
<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 ‘<a class=property
|
|
href="#visibility">visibility</a>’ 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 ‘<a
|
|
class=property href="#display">display</a>’ property to ‘<code
|
|
class=css><a href="#none0">none</a></code>’ 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 ‘<code class=css>visibility:
|
|
visible</code>’.
|
|
|
|
<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, ‘<code
|
|
class=css><a href="#collapse">collapse</a></code>’ has the same
|
|
meaning as ‘<code class=css><a
|
|
href="#hidden0">hidden</a></code>’.
|
|
</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…
|
|
|
|
<table class=propdef id=namerotation>
|
|
<tbody>
|
|
<tr>
|
|
<td>Name:
|
|
|
|
<td><dfn id=rotation>rotation</dfn>
|
|
|
|
<tr>
|
|
<td>Value:
|
|
|
|
<td><var><a href="#ltanglegt"><angle></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 ≤ <var>angle</var> < 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"><bg-position></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 <length> the absolute value, otherwise a percentage
|
|
</table>
|
|
|
|
<p>The value of ‘<a class=property
|
|
href="#rotation-point">rotation-point</a>’ 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>‘<a class=property href="#rotation">Rotation</a>’ rotates a
|
|
<a href="#block-level">block-level</a> element counterclockwise around the
|
|
point given by ‘<a class=property
|
|
href="#rotation-point">rotation-point</a>’. The border, padding and
|
|
content are rotated, and also any background that is not ‘<code
|
|
class=css>fixed</code>’. 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 ‘<a class=property
|
|
href="#rotation">rotation</a>’ is the angle normalized to fall in
|
|
0deg ≤ <var>angle</var> < 360deg. The computed value or ‘<a
|
|
class=property href="#rotation-point">rotation-point</a>’ is a pair
|
|
in which any <var><a href="#ltlengthgt"><length></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 ‘<a
|
|
class=property href="#rotation-point">rotation-point</a>’ having
|
|
its default value of ‘<code class=css>50% 50%</code>’.</p>
|
|
|
|
<pre>H1 {rotation: 180deg}</pre>
|
|
</div>
|
|
|
|
<div class=example>
|
|
<p>This example displays column headers in a table diagonally. It uses
|
|
‘<a class=property
|
|
href="#block-progression">block-progression</a>’ (see <a
|
|
href="#CSS3TEXTLAYOUT"
|
|
rel=biblioentry>[CSS3TEXTLAYOUT]<!--{{!CSS3TEXTLAYOUT}}--></a>) to write
|
|
the column headers vertically and applies ‘<a class=property
|
|
href="#rotation">rotation</a>’ 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 ‘<a
|
|
class=property href="#run-in">run-in</a>’ value of ‘<a
|
|
class=property href="#display">display</a>’.
|
|
|
|
<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 ‘<code
|
|
class=css>:before</code>’ 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>
|
|
| | | |
|
|
| | | | ⇦ ☻
|
|
| | | 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
|
|
‘<a class=property href="#z-index">z-index</a>’ 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 ‘<code class=css>z-index:
|
|
auto</code>’ or ‘<code class=css>z-index: 0</code>’,
|
|
in tree order. For those with ‘<code class=css>z-index:
|
|
auto</code>’, 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 ‘<code class=css>z-index:
|
|
0</code>’, 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å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å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å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 Ç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å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åkon Wium Lie; Tantek Ç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><angle></var>, <a href="#ltanglegt"><strong>#</strong></a>
|
|
|
|
<li><var><bg-position></var>, <a
|
|
href="#ltbg-positiongt"><strong>#</strong></a>
|
|
|
|
<li><var><length></var>, <a
|
|
href="#ltlengthgt"><strong>#</strong></a>
|
|
|
|
<li><var><number></var>, <a
|
|
href="#ltnumbergt"><strong>#</strong></a>
|
|
|
|
<li><var><page-floats></var>, <a
|
|
href="#ltpage-floatsgt"><strong>#</strong></a>
|
|
|
|
<li><var><template></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 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 | <template>| none
|
|
|
|
<td>inline
|
|
|
|
<td>all elements
|
|
|
|
<td>no
|
|
|
|
<td>N/A
|
|
|
|
<td>visual (‘none’ applies to all media)
|
|
|
|
<tr valign=baseline>
|
|
<td><a class=property href="#float">float</a>
|
|
|
|
<td>left | right | none | <page-floats>
|
|
|
|
<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><length> | <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>[ <length> | <percentage> | 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><length> | <percentage> | 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 ‘overflow’
|
|
|
|
<td>yes
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr valign=baseline>
|
|
<td><a class=property href="#marquee-loop">marquee-loop</a>
|
|
|
|
<td><non-negative-integer> | infinite
|
|
|
|
<td>1
|
|
|
|
<td>same as ‘overflow’
|
|
|
|
<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 ‘overflow’
|
|
|
|
<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 ‘overflow’
|
|
|
|
<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><length> | <percentage> | 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><length> | <percentage> | 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
|
|
‘inline-block’ 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 ‘overflow’
|
|
|
|
<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
|
|
‘inline-block’ elements
|
|
|
|
<td>no
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr valign=baseline>
|
|
<td><a class=property href="#padding1">padding</a>
|
|
|
|
<td>[ <length> | <percentage> ]{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>[ <length> | <percentage> ]
|
|
|
|
<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><angle>
|
|
|
|
<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><bg-position>
|
|
|
|
<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><length> | <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:
|
|
-->
|