8000 csswg-drafts/css2/visuren.html at dc7b59e84381fcc5399c286a2a678e03e7838bcf · xfq/csswg-drafts · GitHub
Skip to content

visuren.html

Latest commit

 

History

History
2450 lines (2180 loc) · 109 KB

visuren.html

File metadata and controls

2450 lines (2180 loc) · 109 KB
<tr valign=baseline><td><em>Applies to:</em>&nbsp;&nbsp;<td>positioned elements
<tr valign=baseline><td><em>Inherited:</em>&nbsp;&nbsp;<td>no
<tr valign=baseline><td><em>Percentages:</em>&nbsp;&nbsp;<td>refer to height of containing block
<tr valign=baseline><td><em>Media:</em>&nbsp;&nbsp;<td><a href="media.html#visual-media-group" class="noxref">visual</a>
<tr valign=baseline><td><em>Computed&nbsp;value:</em>&nbsp;&nbsp;<td>for 'position:relative', see section
<a href="visuren.html#relative-positioning">Relative
Positioning.</a> For 'position:static', 'auto'. Otherwise: if
specified as a length, the corresponding absolute length; if
specified as a percentage, the specified value; otherwise, 'auto'.
</table>
</dl>
</div>
<p>Like 'top', but specifies how far a box's bottom margin edge is
offset above the bottom of the box's <a
href="#containing-block">containing block</a>. For relatively
positioned boxes, the offset is with respect to the bottom edge of the
box itself.
<span class="note">
Note: For absolutely positioned elements whose containing block is based on a block-level element, this property is an offset from the <em>padding</em> edge of that element.
</span>
</p>
<div class="propdef">
<dl><dt>
<span class="index-def" title="'left'"><a name="propdef-left" class="propdef-title"><strong>'left'</strong></a></span>
<dd>
<table class="propinfo" cellspacing=0 cellpadding=0>
<tr valign=baseline><td><em>Value:</em>&nbsp;&nbsp;<td><a href="syndata.html#value-def-length" class="noxref"><span class="value-inst-length">&lt;length&gt;</span></a> | <a href="syndata.html#value-def-percentage" class="noxref"><span class="value-inst-percentage">&lt;percentage&gt;</span></a> | auto | <a href="cascade.html#value-def-inherit" class="noxref"><span class="value-inst-inherit">inherit</span></a>
<tr valign=baseline><td><em>Initial:</em>&nbsp;&nbsp;<td>auto
<tr valign=baseline><td><em>Applies to:</em>&nbsp;&nbsp;<td>positioned elements
<tr valign=baseline><td><em>Inherited:</em>&nbsp;&nbsp;<td>no
<tr valign=baseline><td><em>Percentages:</em>&nbsp;&nbsp;<td>refer to width of containing block
<tr valign=baseline><td><em>Media:</em>&nbsp;&nbsp;<td><a href="media.html#visual-media-group" class="noxref">visual</a>
<tr valign=baseline><td><em>Computed&nbsp;value:</em>&nbsp;&nbsp;<td>for 'position:relative', see section
<a href="visuren.html#relative-positioning">Relative
Positioning.</a> For 'position:static', 'auto'. Otherwise: if
specified as a length, the corresponding absolute length; if
specified as a percentage, the specified value; otherwise,
'auto'.
</table>
</dl>
</div>
<p>Like 'top', but specifies how far a box's left margin edge is
offset to the right of the left edge of the box's <a
href="#containing-block">containing block</a>. For relatively
positioned boxes, the offset is with respect to the left edge of the
box itself.
<span class="note">
Note: For absolutely positioned elements whose containing block is based on a block-level element, this property is an offset from the <em>padding</em> edge of that element.
</span>
</p>
<p>The values for the four properties have the following meanings:</p>
<dl>
<dt><strong><a href="syndata.html#value-def-length" class="noxref"><span class="value-inst-length">&lt;length&gt;</span></a></strong></dt>
<dd>The offset is a fixed distance from the reference edge. Negative values are allowed.
</dd>
<dt><strong><a href="syndata.html#value-def-percentage" class="noxref"><span class="value-inst-percentage">&lt;percentage&gt;</span></a></strong></dt>
<dd>The offset is a percentage of the containing block's width (for <a href="visuren.html#propdef-left" class="noxref"><span class="propinst-left">'left'</span></a> or <a href="visuren.html#propdef-right" class="noxref"><span
class="propinst-right">'right'</span></a>) or height (for <a href="visuren.html#propdef-top" class="noxref"><span
class="propinst-top">'top'</span></a> and <a href="visuren.html#propdef-bottom" class="noxref"><span
class="propinst-bottom">'bottom'</span></a>). Negative values are allowed.
</dd>
<dt><strong>auto</strong></dt>
<dd>For non-replaced elements, the effect of this value
depends on which of related properties have the value 'auto' as
well. See the sections on the
<a href="visudet.html#abs-non-replaced-width">width</a>
and <a href="visudet.html#abs-non-replaced-height">height</a>
of <a href="#absolutely-positioned">absolutely positioned</a>,
non-replaced elements for details. For replaced elements, the
effect of this value depends only on the intrinsic dimensions of the
replaced content. See the sections on the <a
href="visudet.html#abs-replaced-width">width</a> and <a
href="visudet.html#abs-replaced-height">height</a> of absolutely
positioned, replaced elements for details.
</dd>
</dl>
<h2>9.4 <a name="normal-flow">Normal flow</a></h2>
<p>Boxes in the normal flow belong to a <a name="x26"><span class="index-def"
title="formatting context">formatting context</span></a>, which may be
block or inline, but not both simultaneously. <a
href="#block-box">Block</a> boxes participate in a <a
href="#block-formatting">block formatting</a> context. <a
href="#inline-box">Inline boxes</a> participate in an <a
href="#inline-formatting">inline formatting</a> context.
</p>
<h3 id="block-formatting"><a name="q15">9.4.1 Block formatting contexts</a></h3>
<p>Floats, absolutely positioned elements, inline-blocks, table-cells, and elements with 'overflow' other than 'visible' establish new block formatting contexts.</p>
<p>In a block formatting context, boxes are laid out one after the
other, vertically, beginning at the top of a containing block. The
vertical distance between two sibling boxes is determined by the <a href="box.html#propdef-margin" class="noxref"><span
class="propinst-margin">'margin'</span></a> properties. Vertical margins
between adjacent block boxes in a block formatting context <a
href="box.html#collapsing-margins">collapse</a>.
</p>
<p>
In a block formatting context, each box's left outer edge touches the
left edge of 1DDA the containing block (for right-to-left formatting, right
edges touch). This is true even in the presence of floats (although a
box's <em>line boxes</em> may shrink due to the floats), unless the box
establishes a new block formatting context (in which case the box itself
<em>may</em> become narrower due to the floats).
</p>
<p>For information about page breaks in paged media, please consult
the section on <a href="page.html#allowed-page-breaks">allowed
page breaks</a>.
</p>
<h3>9.4.2 <a name="inline-formatting">Inline formatting context</a></h3>
<p>In an inline formatting context, boxes are laid out horizontally,
one after the other, beginning at the top of a containing
block. Horizontal margins, borders, and padding are respected between
these boxes. The boxes may be aligned vertically in different ways: their
bottoms or tops may be aligned, or the baselines of text within them
may be aligned. The rectangular area that contains the boxes that form
a line is called a <span class="index-def" title="line box"><a
name="line-box"><dfn>line box</dfn></a></span>.
</p>
<p>The width of a line box is determined by a <a
href="#containing-block">containing block</a> and the presence of floats.
The height of a line
box is determined by the rules given in the section on <a
href="visudet.html#line-height">line height calculations</a>.
</p>
<p>A line box is always tall enough for all of the boxes it contains.
However, it may be taller than the tallest box it contains
(if, for example, boxes are aligned so that baselines line up).
When the height of a box B is less than the height of the line box containing it,
the vertical alignment of B within the line box is determined by
the 'vertical-align' property.
When several inline boxes cannot fit horizontally within a single
line box, they are distributed among two or more vertically-stacked
line boxes. Thus, a paragraph is a vertical stack of line boxes. Line
boxes are stacked with no vertical separation and they never overlap.
</p>
<p>In general, the left edge of a line box touches the left edge
of its containing block and the right edge touches the right edge of
its containing block. However, floating boxes may come between the
containing block edge and the line box edge. Thus, although line
boxes in the same inline formatting context generally have the same
width (that of the containing block), they may vary in width if
available horizontal space is reduced due to <a
href="#floats">floats</a>. Line boxes in the same inline formatting
context generally vary in height (e.g., one line might contain a tall
image while the others contain only text).
</p>
<p>When the total width of the inline boxes on a line is less than the
width of the line box containing them, their horizontal distribution
within the line box is determined by the <a href="text.html#propdef-text-align" class="noxref"><span
class="propinst-text-align">'text-align'</span></a> property. If that
property has the value 'justify', the user agent may stretch the
inline boxes as well.
</p>
<p>
When an inline box exceeds the width of a line box, it is split into several boxes and these boxes are distributed across several line boxes. If an inline box cannot be split (e.g. if the inline box contains a single character, or language specific word breaking rules disallow a break within the inline box, or if the inline box is affected by a white-space value of nowrap or pre), then the inline box overflows the line box.
</p>
<p>
When an inline box is split, margins,
borders, and padding have no visual effect where the split occurs (or
at any split, when there are several).
</p>
<p>Inline boxes may also be split into several boxes <em>within the
same line box</em> due to <a href="#direction">bidirectional text
processing</a>.
</p>
<div class="html-example"><p>
Here is an example of inline box construction. The following paragraph
(created by the HTML block-level element P) contains anonymous text
interspersed with the elements EM and STRONG:
</p>
<pre><code class="html">
&lt;P&gt;Several &lt;EM&gt;emphasized words&lt;/EM&gt; appear
&lt;STRONG&gt;in this&lt;/STRONG&gt; sentence, dear.&lt;/P&gt;
</code></pre>
<p>The P element generates a block box that contains five inline
boxes, three of which are anonymous:</p>
<ul>
<li>Anonymous: "Several"</li>
<li>EM: "emphasized words"</li>
<li>Anonymous: "appear"</li>
<li>STRONG: "in this"</li>
<li>Anonymous: "sentence, dear."</li>
</ul>
<p>To format the paragraph, the user agent flows the five boxes into
line boxes. In this example, the box generated for the P element
establishes the containing block for the line boxes. If the containing
block is sufficiently wide, all the inline boxes will fit into a
single line box:
</p>
<pre>
Several <em>emphasized words</em> appear <strong>in this</strong> sentence, dear.
</pre>
<p>If not, the inline boxes will be split up and distributed across
several line boxes. The previous paragraph might be split as follows:
</p>
<pre>
Several <em>emphasized words</em> appear
<strong>in this</strong> sentence, dear.
</pre>
or like this:
<pre>
Several <em>emphasized</em>
<em>words</em> appear <strong>in this</strong>
sentence, dear.
</pre>
</div>
<p>In the previous example, the EM box was split into two EM boxes
(call them "split1" and "split2"). Margins, borders,
padding, or text decorations have no visible effect after split1 or
before split2.
</p>
<div class="html-example"><p>
Consider the following example:
</p>
<pre><code class="html">
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"&gt;
&lt;HTML&gt;
&lt;HEAD&gt;
&lt;TITLE&gt;Example of inline flow on several lines&lt;/TITLE&gt;
&lt;STYLE type="text/css"&gt;
EM {
View remainder of file in raw view