8000 csswg-drafts/css2/visuren.html at d5287da62400439d5b57be4b8347e3e6b1ec048c · w3c/csswg-drafts · GitHub
Skip to content

visuren.html

Latest commit

 

History

History
2634 lines (2311 loc) · 117 KB

visuren.html

File metadata and controls

2634 lines (2311 loc) · 117 KB
</dd>
<dt><span class="index-def" title="'inline', definition of"><a
name="value-def-inline"><strong>inline</strong></a></span>
</dt>
<dd>This value causes an element to generate one or more inline boxes.
</dd>
<dt><span class="index-def" title="'list-item', definition of"><a
name="value-def-list-item"><strong>list-item</strong></a></span>
</dt>
<dd>This value causes an element (e.g., LI in HTML) to generate a
principal block box and a marker box. For information about
lists and examples of list formatting, please consult the section on
<a href="generate.html#lists">lists</a>.
</dd>
<dt><strong>none</strong></dt>
<dd><a name="x22"><span class="index-def" title="'none'::as display value">This
value</span></a> causes an element to not appear in the <a
href="intro.html#formatting-structure">formatting structure</a> (i.e.,
in visual media the element generates no boxes and has no effect on
layout). Descendant elements do not generate any boxes either; the
element and its content are removed from the formatting structure
entirely. This behavior <strong>cannot</strong> be overridden by
setting the <a href="visuren.html#propdef-display" class="noxref"><span class="propinst-display">'display'</span></a> property
on the descendants.
<p>Please note that a display of 'none' does not create an invisible
box; it creates no box at all. CSS includes mechanisms that enable an
element to generate boxes in the formatting structure that affect
formatting but are not visible themselves. Please consult the section
on <a href="visufx.html#visibility">visibility</a> for details.
</p>
</dd>
<dt>
<a href="tables.html#value-def-table" class="noxref"><span class="value-inst-table">table</span></a>,
<a href="tables.html#value-def-inline-table" class="noxref"><span class="value-inst-inline-table">inline-table</span></a>,
<a href="tables.html#value-def-table-row-group" class="noxref"><span class="value-inst-table-row-group">table-row-group</span></a>,
<a href="tables.html#value-def-table-column" class="noxref"><span class="value-inst-table-column">table-column</span></a>,
<a href="tables.html#value-def-table-column-group" class="noxref"><span class="value-inst-table-column-group">table-column-group</span></a>,
<a href="tables.html#value-def-table-header-group" class="noxref"><span class="value-inst-table-header-group">table-header-group</span></a>,
<a href="tables.html#value-def-table-footer-group" class="noxref"><span class="value-inst-table-footer-group">table-footer-group</span></a>,
<a href="tables.html#value-def-table-row" class="noxref"><span class="value-inst-table-row">table-row</span></a>,
<a href="tables.html#value-def-table-cell" class="noxref"><span class="value-inst-table-cell">table-cell</span></a>, and
<a href="tables.html#value-def-table-caption" class="noxref"><span class="value-inst-table-caption">table-caption</span></a>
</dt>
<dd>These values cause an element to behave like a table element
(subject to restrictions described in the chapter on <a
href="tables.html">tables</a>).
</dd>
</dl>
<p>The computed value is the same as the specified value, except for
positioned and floating elements (see <a
href="#dis-pos-flo">Relationships between 'display', 'position', and
'float'</a>) and for the root element.
For the root element, the computed value is changed as described in
the section on the <a href="#dis-pos-flo">relationships between 'display', 'position', and 'float'</a>.
</p>
<p>Note that although the <a href="about.html#initial-value">initial
value</a> of <a href="visuren.html#propdef-display" class="noxref"><span class="propinst-display">'display'</span></a> is
'inline', rules in the user agent's <a
href="cascade.html#default-style-sheet">default style sheet</a> may <a
href="cascade.html">override</a> this value. See the <a
href="sample.html">sample style sheet</a> for HTML 4 in the
appendix.
</p>
<div class="example"><P style="display:none">Example(s):</P>
<p>Here are some examples of the <a href="visuren.html#propdef-display" class="noxref"><span
class="propinst-display">'display'</span></a> property:
</p>
<pre><code class="css">
p { display: block }
em { display: inline }
li { display: list-item }
img { display: none } /* Do not display images */
</code></pre>
</div>
<h2>9.3 <a name="positioning-scheme">Positioning schemes</a></h2>
<p>In CSS&nbsp;2.1, a box may be laid out according to three <a name="x23"><span
class="index-def" title="positioning scheme"><dfn>positioning
schemes:</dfn></span></a></p>
<ol>
<li><a href="#normal-flow">Normal flow</a>. In CSS&nbsp;2.1, normal
flow includes <a href="#block-formatting">block formatting</a>
of block-level boxes,
<a href="#inline-formatting">inline formatting</a>
of inline-level boxes, and <a
href="#relative-positioning">relative positioning</a> of
block-level and inline-level boxes.
</li>
<li><a href="#floats">Floats</a>. In the float model,
a box is first laid out according to the normal flow, then
taken out of the flow and shifted
to the left or right as far as possible. Content may
flow along the side of a float.
</li>
<li><a href="#absolute-positioning">Absolute positioning</a>.
In the absolute positioning model, a box is removed from
the normal flow entirely (it has no impact on later siblings)
and assigned a position with respect to a containing block.
</li>
</ol>
<p>An element is called <dfn><a name="x24"><span class="index-def">out of
flow</span></a></dfn> if it is floated, absolutely positioned, or is the
root element. An element is called <dfn><a name="x25"><span
class="index-def">in-flow</span></a></dfn> if it is not out-of-flow. The
<dfn><a name="x26"><span class="index-def">flow of an element</span></a></dfn>
<var>A</var> is the set consisting of <var>A</var> and all in-flow
elements whose nearest out-of-flow ancestor is <var>A</var>.
<div class="note">
<em><strong>Note.</strong>
CSS&nbsp;2.1's positioning schemes help authors make their documents
more accessible by allowing them to avoid mark-up tricks
(e.g., invisible images) used for layout effects.
</em>
</div>
<h3>9.3.1 <a name="choose-position">Choosing a positioning scheme:</a> <a href="visuren.html#propdef-position" class="noxref"><span
class="propinst-position">'position'</span></a> property</h3>
<p>The <a href="visuren.html#propdef-position" class="noxref"><span class="propinst-position">'position'</span></a> and <a href="visuren.html#propdef-float" class="noxref"><span
class="propinst-float">'float'</span></a> properties determine which
of the CSS&nbsp;2.1 positioning algorithms is used to calculate
the position of a box.
</p>
<div class="propdef">
<dl><dt>
<span class="index-def" title="'position'"><a name="propdef-position" class="propdef-title"><strong>'position'</strong></a></span>
<dd>
<table class="propinfo" cellspacing=0 cellpadding=0>
<tr valign=baseline><td><em>Value:</em>&nbsp;&nbsp;<td>static | relative | absolute | fixed | <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>static
<tr valign=baseline><td><em>Applies to:</em>&nbsp;&nbsp;<td>all elements
<tr valign=baseline><td><em>Inherited:</em>&nbsp;&nbsp;<td>no
<tr valign=baseline><td><em>Percentages:</em>&nbsp;&nbsp;<td>N/A
<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>as specified
</table>
</dl>
</div>
<p>The values of this property have the following meanings:</p>
<dl>
<dt><strong>static</strong></dt>
<dd>The box is a normal box, laid out according to the <a
href="#normal-flow">normal flow</a>. The
<a href="visuren.html#propdef-top" class="noxref"><span class="propinst-top">'top'</span></a>,
<a href="visuren.html#propdef-right" class="noxref"><span class="propinst-right">'right'</span></a>,
<a href="visuren.html#propdef-bottom" class="noxref"><span class="propinst-bottom">'bottom'</span></a>,
and <a href="visuren.html#propdef-left" class="noxref"><span class="propinst-left">'left'</span></a>
properties do not apply.
</dd>
<dt><strong>relative</strong></dt>
<dd>The box's position is calculated according to the <a
href="#normal-flow">normal flow</a> (this is called the position in
normal flow). Then the box is offset <a
href="#relative-positioning">relative</a> to its normal position. When
a box B is relatively positioned, the position of the following box is
calculated as though B were not offset. The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.
</dd>
<dt><strong>absolute</strong></dt>
<dd> The box's position (and possibly size) is specified
with the <a href="visuren.html#propdef-top" class="noxref"><span class="propinst-top">'top'</span></a>,
<a href="visuren.html#propdef-right" class="noxref"><span class="propinst-right">'right'</span></a>,
<a href="visuren.html#propdef-bottom" class="noxref"><span class="propinst-bottom">'bottom'</span></a>, and
<a href="visuren.html#propdef-left" class="noxref"><span class="propinst-left">'left'</span></a>
properties.
These properties specify offsets with respect to the box's
<a href="#containing-block">containing block</a>. Absolutely
positioned boxes are taken out of the normal flow. This means
they have no impact on the layout of later siblings. Also,
though <a href="#absolutely-positioned">absolutely positioned</a>
boxes have margins, they
do not <a href="box.html#collapsing-margins">collapse</a>
with any other margins.
</dd>
<dt><strong>fixed</strong></dt>
<dd> The box's position is calculated according to the 'absolute'
model, but in addition, the box is <a
href="#fixed-positioning">fixed</a> with respect to some reference.
As with the 'absolute' model, the box's margins do not collapse with any other margins.
In the case of handheld, projection, screen, tty, and tv media types,
the box is fixed with respect to the <a href="#viewport">viewport</a>
and does not move when
scrolled. In the case of the print media type, the box is rendered on every page, and is fixed with respect to the page box, even if the page is seen through a <a href="#viewport">viewport</a>
(in the case of a print-preview, for example). For other media
types, the presentation is undefined.
Authors may wish to specify 'fixed' in a
media-dependent way. For instance, an author may want a box to remain
at the top of the <a href="#viewport">viewport</a> on the screen, but
not at the top of each printed page. The two specifications may be
separated by using an <a href="media.html#at-media-rule">@media
rule</a>, as in:
<div class="example"><P style="display:none">Example(s):</P>
<pre><code class="css">
@media screen {
h1#first { position: fixed }
}
@media print {
h1#first { position: static }
}
</code></pre>
</div>
<p>UAs must not paginate the content of fixed boxes. <span
class="note">Note that UAs may print invisible content in other
ways. See <a href="page.html#outside-page-box">"Content outside the
page box"</a> in chapter&nbsp;13.</span>
</dd>
</dl>
<p>
User agents may treat position as 'static' on the root element.
</p>
<h3>9.3.2 <a name="position-props">Box offsets</a>: <a href="visuren.html#propdef-top" class="noxref"><span
class="propinst-top">'top'</span></a>, <a href="visuren.html#propdef-right" class="noxref"><span
class="propinst-right">'right'</span></a>, <a href="visuren.html#propdef-bottom" class="noxref"><span
class="propinst-bottom">'bottom'</span></a>, <a href="visuren.html#propdef-left" class="noxref"><span
class="propinst-left">'left'</span></a></h3>
<p>An element is said to be <span class="index-def" title="positioned
element/box"><a name="positioned-element"><dfn>positioned</dfn></a></span>
if its <a href="visuren.html#propdef-position" class="noxref"><span class="propinst-position">'position'</span></a> property has
a value other than 'static'. Positioned elements generate
positioned boxes, laid out according to four properties:</p>
<div class="propdef">
<dl><dt>
<span class="index-def" title="'top'"><a name="propdef-top" class="propdef-title"><strong>'top'</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 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>if
specified as a length, the corresponding absolute length; if
specified as a percentage, the specified value; otherwise, 'auto'.
</table>
</dl>
</div>
<p>This property specifies how far an <a
href="#absolutely-positioned">absolutely positioned</a> box's top
margin edge is offset below the top edge of the box's <a
href="#containing-block">containing block</a>. For relatively
positioned boxes, the offset is with respect to the top edges of the
box itself (i.e., the box is given a position in the normal flow, then
offset from that position according to these properties).
</p>
<div class="propdef">
<dl><dt>
<span class="index-def" title="'right'"><a name="propdef-right" class="propdef-title"><strong>'right'</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>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 right margin edge is
offset to the left of the right edge of the box's <a
href="#containing-block">containing block</a>. For relatively
positioned boxes, the offset is with respect to the right edge of the
box itself.
</p>
<div class="propdef">
<dl><dt>
<span class="index-def" title="'bottom'"><a name="propdef-bottom" class="propdef-title"><strong>'bottom'</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 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>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.
</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>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.
</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">he 23A ight</a>
of <a href="#absolutely-positioned">absolutely positioned</a>,
non-replaced elements for F69D 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="x33"><span class="index-def"
title="formatting context">formatting context</span></a>, which in CSS&nbsp;2.1
may be table, block or inline. In future levels of CSS, other types of
formatting context will be introduced. <a
href="#block-level">Block-level</a> boxes participate in a <a
href="#block-formatting">block formatting</a> context. <a
href="#inline-level">Inline-level boxes</a> participate in an <a
href="#inline-formatting">inline formatting</a> context. Table
formatting contexts are described in the <a href="tables.html"
>chapter on tables.</a>
</p>
<h3>9.4.1 <a name="block-formatting">Block formatting contexts</a></h3>
<p>Floats, absolutely positioned elements, block containers (such as
inline-blocks, table-cells, and table-captions) that are not block
boxes, and block boxes with 'overflow' other than 'visible'
(except when that value has been propagated to the viewport) establish
new block formatting contexts for their contents.</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-level 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 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
<a href="#bfc-next-to-float"><em>may</em> become narrower</a> 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 contexts</a></h3>
<p>An inline formatting context is established by a block container
box that contains no block-level boxes.
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 <a href="visudet.html#propdef-vertical-align" class="noxref"><span class="propinst-vertical-align">'vertical-align'</span></a> property.
When several inline-level 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 (except as specified
elsewhere) 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-level 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 spaces
and words in inline boxes (but not inline-table and inline-block
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>
<p id="phantom-line-box">Line boxes are created as needed to hold
inline-level content within an inline formatting context. Line boxes
that contain no text, no <a
href="text.html#white-space-prop">preserved white space,</a> no inline
elements with non-zero margins, padding, or borders, and no other <a
href="#positioning-scheme">in-flow</a> content (such as images, inline
blocks or inline tables), and do not end with a preserved newline must
be treated as zero-height line boxes for the purposes of determining
the positions of any elements inside of them, and must be treated as
not existing for any other purpose.
</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;
View remainder of file in raw view