visuren.html

CSS lets learn this step by step...

elements</dfn></a></span> are those elements of the source document that
do not form new blocks of content; the content is distributed in lines
 (e.g., emphasized pieces of text
within a paragraph, inline images,
etc.). Several values of the <a href="visuren.html#propdef-display" class="noxref"><span
class="propinst-display">'display'</span></a> property make an element
inline: 'inline', 'inline-table', 
'compact' and 'run-in' (part of the time; see <a
href="#compact">compact</a> and <a href="#run-in">run-in boxes</a>). 
Inline-level elements generate <a name="inline-box">inline boxes</a>.

<P>Inline boxes may participate in several formatting contexts:</p>

<ul>
<li>Within a block box, an inline boxes participate in an <a
href="#inline-formatting">inline formatting context</a>.
<li>A <a href="#compact">compact</a> inline box 
is given a position in the margin of a block box.
<li><a href="generate.html#markers">Marker</a> boxes are 
also given positions outside of a block box.
</ul>

<h4> <a name="anonymous">Anonymous inline boxes</a></h4>

<p>In a document like this:

<pre>
&lt;P>Some &lt;EM>emphasized&lt;/em> text&lt;/P>
</pre>

<p>The P generates a block box, with several inline boxes inside
it. The box for "emphasized" is an inline box generated by an inline
element (EM), but the other boxes ("Some" and "text") are inline boxes
generated by a block-level element (P). The latter are called <a name="x11"><span
class="index-def" title="anonymous inline boxes">anonymous inline
boxes</span></a>, because they don't have an associated inline-level element.

<p>Such anonymous inline boxes inherit inheritable properties from
their block parent box. Non-inherited properties have their initial
value. In the example, the color of the anonymous initial boxes is
inherited from the P, but the background is transparent.

<p>If it is clear from the context which type of anonymous box is
meant, both anonymous inline boxes and anonymous block boxes are
simply called anonymous boxes in this specification.

<p>There are more types of anonymous boxes that arise when formatting
<a href="tables.html#anonymous-boxes">tables</a>.

<H3>9.2.3 <a name="compact">Compact boxes</a></h3>

<P>A <a name="x12"><span class="index-def" title="compact box"><dfn>compact
box</dfn></span></a> behaves as follows:</p>

<ul>
<li>If a <a href="#block-box">block</a> box (that does not
float and is not <a href="#absolutely-positioned">absolutely positioned</a>) 
follows the compact box, the compact box is
formatted like a one-line inline box.  
The resulting box width is compared to one of the side margins of
the block box. 
The choice of left or right margin is determined
by the <a href="visuren.html#propdef-direction" class="noxref"><span class="propinst-direction">'direction'</span></a> specified
for the element producing the <a href="#containing-block">
containing block</a> for the compact box and following box.
If the inline box width is less
than or equal to the margin, the inline box is given
a position in the margin as described immediately below.

<li>Otherwise, the compact box becomes a block box.
</ul>

<P>The compact box is given a position in the margin as follows: it is
outside (to the left or right) of the first <a href="#line-box">line
box</a> of the block, but it affects the calculation of that <a
href="visudet.html#line-height">line box's height</a>. The <a href="visudet.html#propdef-vertical-align" class="noxref"><span
class="propinst-vertical-align">'vertical-align'</span></a> property of
the compact box determines the vertical position of the compact box
relative to that line box. The horizontal position of the compact box
is always in the margin of the block box.

<P>An element that cannot be formatted on one line cannot be placed in
the margin of the following block. For example, a 'compact' element in
HTML that contains a BR element will always be formatted as a
block box (assuming the default style for BR, which inserts a
newline). For placing multi-line texts in the margin, the <a href="visuren.html#propdef-float" class="noxref"><span
class="propinst-float">'float'</span></a> property is often more appropriate.

<div class="html-example">
<p>The following example illustrates a compact box.

<pre>
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"&gt;
&lt;HTML&gt;
  &lt;HEAD&gt;
    &lt;TITLE&gt;A compact box example&lt;/TITLE&gt;
    &lt;STYLE type="text/css"&gt;
      DT { display: compact }
      DD { margin-left: 4em }
    &lt;/STYLE&gt;
  &lt;/HEAD&gt;
  &lt;BODY&gt;
    &lt;DL&gt;
      &lt;DT&gt;Short
        &lt;DD&gt;&lt;P&gt;Description goes here.
      &lt;DT&gt;too long for the margin
        &lt;DD&gt;&lt;P&gt;Description goes here.
    &lt;/DL&gt;
  &lt;/BODY&gt;
&lt;/HTML&gt;
</pre>
</div>

<P>This example might be formatted as:

<pre>
<b>short</b>    Description goes here

<b>too long for the margin</b>
         Description goes here
</pre>

<p>The <a href="text.html#propdef-text-align" class="noxref"><span class="propinst-text-align">'text-align'</span></a> property
can be used to align the compact element inside the margin: against
the left edge of the margin ('left'), against the right edge
('right'), or centered in the margin ('center'). The value 'justify'
doesn't apply, and is handled as either 'left' or 'right', depending
on the <a href="visuren.html#propdef-direction" class="noxref"><span class="propinst-direction">'direction'</span></a> of the
block-level element in whose margin the compact element is
formatted. ('left' if the direction is 'ltr', 'right' if it is 'rtl'.)

<P>Please consult the section on 
<a href="generate.html#compact-run-in-gen">generated content</a>
for information about how compact boxes interact with generated
content.

<H3>9.2.4 <a name="run-in">Run-in boxes</a></h3>

<P>A <a name="x13"><span class="index-def" title="run-in box"><dfn>run-in
box</dfn></span></a> behaves as follows:</p>

<ul>
<li>If a <a href="#block-box">block</a>
box (that does not float and is not
<a href="#absolutely-positioned">absolutely positioned</a>) follows the run-in
box, the run-in box becomes the first inline box of the block box.  
<li>Otherwise, the run-in box becomes a block box.
</ul>

<p>A 'run-in' box is useful for run-in headers, as
in this example:

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

<p>This example might be formatted as:

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

<p>The properties of the run-in element are inherited from its
parent in the source tree, not from the block box it visually
becomes part of.

<P>Please consult the section on 
<a href="generate.html#compact-run-in-gen">generated content</a>
for information about how run-in boxes interact with generated
content.

<h3>9.2.5 <a name="display-prop">The</a> <a href="visuren.html#propdef-display" class="noxref"><span
class="propinst-display">'display'</span></a> property</h3>

<div class="propdef">
<dl><dt>
<span class="index-def" title="'display'"><a name="propdef-display" class="propdef-title"><strong>'display'</strong></a></span>
<dd>
<table class="propinfo" cellspacing=0 cellpadding=0>
<tr valign=baseline><td><em>Value:</em>&nbsp;&nbsp;<td>inline | block | list-item | run-in | compact | marker |
table | inline-table | table-row-group | table-header-group |
table-footer-group | table-row | table-column-group | table-column |
table-cell | table-caption | none | <a href="cascade.html#value-def-inherit" class="noxref"><span class="value-inst-inherit">inherit</span></a>
<tr valign=baseline><td><em>Initial:</em>&nbsp;&nbsp;<td>inline
<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#all-media-group" class="noxref">all</a>
</table>
</dl>
</div>


<P>The values of this property have the following meanings:</P>

<dl>
<dt><span class="index-def" title="'block', definition of"><a
name="value-def-block"><strong>block</strong></a></span>

<dd>This value causes an element to generate a 
principal block box.

<dt><span class="index-def" title="'inline', definition of"><a
name="value-def-inline"><strong>inline</strong></a></span>

<dd>This value causes an element to generate one or more inline boxes.

<dt><span class="index-def" title="'list-item', definition of"><a
name="value-def-list-item"><strong>list-item</strong></a></span>
<dd>This value causes an element (e.g., LI in HTML) to generate a
principal block box and a list-item inline box. For information about
lists and examples of list formatting, please consult the section on
<a href="generate.html#lists">lists</a>.

<dt><span class="index-def" title="marker', definition of"><a
name="value-def-marker"><strong>marker</strong></a></span> 
<dd>This value declares <a href="generate.html">generated content</a>
before or after a box to be a marker. This value should only be
used with <a href="generate.html#before-after-content">:before and :after
pseudo-elements</a> attached to block-level elements.
In other cases, this value is interpreted as 'inline'.
Please consult the section on <a
href="generate.html#markers">markers</a> for more information.

<dt><strong>none</strong>

<dd><a name="x19"><span class="index-def" title="'none'::as display value">This
value</span></a> causes an element to generate <b>no</b> boxes in the <a
href="intro.html#formatting-structure">formatting structure</a> (i.e.,
the element has no effect on layout).  Descendant elements do not
generate any boxes either; 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.

<dt><span class="index-def" title="'run-in', definition of"><a
name="value-def-run-in"><strong>run-in</strong></a></span>
and <span class="index-def" title="'compact', definition of"><a
name="value-def-compact"><strong>compact</strong></a></span>
<dd>These values create either block or 
inline boxes, depending on context. 
Properties apply to run-in and compact boxes based on their
final status (inline-level or block-level).  For example, the <a href="text.html#propdef-white-space" class="noxref"><span
class="propinst-white-space">'white-space'</span></a> property only
applies if the box becomes a block box.

<dt><span class="index-inst" title="'table'"><a
name="value-inst-table"><strong>table</strong></a></span>, <span
class="index-inst" title="'inline-table'"><a
name="value-inst-inline-table"><strong>inline-table</strong></a></span>, <span
class="index-inst" title="'table-row-group'"><a
name="value-inst-table-row-group"><strong>table-row-group</strong></a></span>,
<span class="index-inst" title="'table-column'"><a name="x25" href="tables.html#value-def-table-column" class="noxref"><span class="value-inst-table-column"><strong>table-column</strong></span></a></span>,
<span class="index-inst" title="'table-column-group'"><a
name="value-inst-table-column-group"><strong>table-column-group</strong></a></span>,
<span class="index-inst" title="'table-header-group'"><a name="value-inst-table-header-group"><strong>table-header-group</strong></a></span>,
<span class="index-inst" title="'table-footer-group'"><a name="value-inst-table-footer-group"><strong>table-footer-group</strong></a></span>,
<span class="index-inst" title="'table-row'"><a