box.html

CSS lets learn this step by step...

<P>Margin properties specify the width of the <a
href="#box-margin-area">margin area</a> of a box.  The
<a href="box.html#propdef-margin" class="noxref"><span class="propinst-margin">'margin'</span></a> shorthand property sets
the margin for all four sides while the other margin properties only
set their respective side. 

<P>The properties defined in this section refer to the <span
class="index-def" title="&lt;margin-width&gt;::definition of"><a
name="value-def-margin-width"><strong>&lt;margin-width&gt;</strong></a></span>
value type, which may take one of the following values:

<dl>
<dt><a href="syndata.html#value-def-length" class="noxref"><span class="value-inst-length"><strong>&lt;length&gt;</strong></span></a>
<dd>Specifies a fixed width.
<dt><a href="syndata.html#value-def-percentage" class="noxref"><span class="value-inst-percentage"><strong>&lt;percentage&gt;</strong></span></a>
<dd>The percentage is calculated
with respect to the <em>width</em> of the generated box's 
<a href="visuren.html#containing-block">containing block</a>.
This is true for <a href="box.html#propdef-margin-top" class="noxref"><span
class="propinst-margin-top">'margin-top'</span></a> and <a href="box.html#propdef-margin-bottom" class="noxref"><span
class="propinst-margin-bottom">'margin-bottom'</span></a>, 
except in the <a href="page.html#page-context">page context</a>,
where percentages refer to page box height.
<dt><strong>auto</strong>
<dd>See the section on <a
href="visudet.html#Computing_widths_and_margins">computing widths and 
margins</a> for behavior.
</dl>

<P>Negative values for margin properties are allowed, but there may be
implementation-specific limits. 

<div class="propdef">
<dl><dt>
<span class="index-def" title="'margin-top'"><a name="propdef-margin-top" class="propdef-title"><strong>'margin-top'</strong></a></span>, <span class="index-def" title="'margin-right'"><a name="propdef-margin-right" class="propdef-title"><strong>'margin-right'</strong></a></span>, <span class="index-def" title="'margin-bottom'"><a name="propdef-margin-bottom" class="propdef-title"><strong>'margin-bottom'</strong></a></span>, <span class="index-def" title="'margin-left'"><a name="propdef-margin-left" class="propdef-title"><strong>'margin-left'</strong></a></span>
<dd>
<table class="propinfo" cellspacing=0 cellpadding=0>
<tr valign=baseline><td><em>Value:</em>&nbsp;&nbsp;<td><a href="box.html#value-def-margin-width" class="noxref"><span class="value-inst-margin-width">&lt;margin-width&gt;</span></a> | <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>0
<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>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>
</table>
</dl>
</div>


<P>These properties set the top, right, bottom, and left margin of a
box.

<div class="example"><P style="display:none">Example(s):</P><P>
<PRE>
H1 { margin-top: 2em }
</PRE>
</div>

<div class="propdef">
<dl><dt>
<span class="index-def" title="'margin'"><a name="propdef-margin" class="propdef-title"><strong>'margin'</strong></a></span>
<dd>
<table class="propinfo" cellspacing=0 cellpadding=0>
<tr valign=baseline><td><em>Value:</em>&nbsp;&nbsp;<td><a href="box.html#value-def-margin-width" class="noxref"><span class="value-inst-margin-width">&lt;margin-width&gt;</span></a>{1,4} | <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>not defined for shorthand properties
<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>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>
</table>
</dl>
</div>


<P> The <a href="box.html#propdef-margin" class="noxref"><span class="propinst-margin">'margin'</span></a> property is a
shorthand property for setting <a href="box.html#propdef-margin-top" class="noxref"><span
class="propinst-margin-top">'margin-top'</span></a>, <a href="box.html#propdef-margin-right" class="noxref"><span
class="propinst-margin-right">'margin-right'</span></a>, <a href="box.html#propdef-margin-bottom" class="noxref"><span
class="propinst-margin-bottom">'margin-bottom'</span></a>, and <a href="box.html#propdef-margin-left" class="noxref"><span
class="propinst-margin-left">'margin-left'</span></a> at the same place in
the style sheet.

<P> If there is only one value, it applies to all
sides. If there are two values, the top and bottom margins
are set to the first value and the right and left margins are
set to the second. If there are three values, the top is
set to the first value, the left and right are set to the
second, and the bottom is set to the third. If there are
four values, they apply to the top, right, bottom, and left,
respectively.

<div class="example"><P style="display:none">Example(s):</P><P>
<PRE>
BODY { margin: 2em }         /* all margins set to 2em */
BODY { margin: 1em 2em }     /* top &amp; bottom = 1em, right &amp; left = 2em */
BODY { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */
</PRE>

<P> The last rule of the example above is equivalent to the example
below:

<PRE>
BODY {
  margin-top: 1em;
  margin-right: 2em;
  margin-bottom: 3em;
  margin-left: 2em;        /* copied from opposite side (right) */
}
</PRE>
</div>

<H3>8.3.1 <a name="collapsing-margins">Collapsing margins</a></H3>

<P>In this specification, the expression <a name="x24"><span class="index-def"
title="collapsing margin"><dfn>collapsing margins</dfn></span></a> means
that adjoining margins (no padding or border areas separate them) of
two or more boxes (which may be next to one another or nested) combine
to form a single margin.

<P>In CSS2, <a name="x25"><span class="index-inst" title="horizontal
margin|margin::horizontal">horizontal margins</span></a> never collapse.

<P><a name="x27"><span class="index-inst" title="vertical margin|margin::vertical">
Vertical margins</span></a> may collapse between certain boxes:</p>

<ul>
<li>Two or more adjoining vertical margins of <a
href="visuren.html#block-box">block</a> boxes in the <a
href="visuren.html#normal-flow">normal flow</a> collapse. The
resulting margin width is the maximum of the adjoining margin widths.
In the case of negative margins, the absolute maximum of the negative
adjoining margins is deducted from the maximum of the positive
adjoining margins. If there are no positive margins, the absolute
maximum of the negative adjoining margins is deducted from zero.

<li>Vertical margins between a <a
href="visuren.html#floats">floated</a> box and any other box do not
collapse.

<li>Margins of <a
href="visuren.html#absolutely-positioned">absolutely</a> and
relatively positioned boxes do not collapse.
</ul>

<P>Please
consult the <a href="#mpb-examples">examples of margin, padding, and
borders</a> for an illustration of collapsed margins.

<H2>8.4 <a name="padding-properties">Padding properties</a>:
<a href="box.html#propdef-padding-top" class="noxref"><span class="propinst-padding-top">'padding-top'</span></a>,
<a href="box.html#propdef-padding-right" class="noxref"><span class="propinst-padding-right">'padding-right'</span></a>,
<a href="box.html#propdef-padding-bottom" class="noxref"><span class="propinst-padding-bottom">'padding-bottom'</span></a>,
<a href="box.html#propdef-padding-left" class="noxref"><span class="propinst-padding-left">'padding-left'</span></a>, and
<a href="box.html#propdef-padding" class="noxref"><span class="propinst-padding">'padding'</span></a>
</H2> 

<P>The padding properties specify the width of the <a
href="#box-padding-area">padding area</a> of a box. The <a href="box.html#propdef-padding" class="noxref"><span
class="propinst-padding">'padding'</span></a> shorthand property sets the
padding for all four sides while the other padding properties only set
their respective side. 

<P>The properties defined in this section refer to the <span
class="index-def" title="&lt;padding-width&gt;::definition of"><a
name="value-def-padding-width"><strong>&lt;padding-width&gt;</strong>
</a></span> value type, which may take one of the following values:</p>

<dl>
<dt><a href="syndata.html#value-def-length" class="noxref"><span class="value-inst-length"><strong>&lt;length&gt;</strong></span></a>
<dd>Specifies a fixed width.
<dt><a href="syndata.html#value-def-percentage" class="noxref"><span class="value-inst-percentage"><strong>&lt;percentage&gt;</strong></span></a>
<dd>The percentage is calculated with
respect to the <em>width</em> of the generated box's <a
href="visuren.html#containing-block">containing block</a>, even for
<a href="box.html#propdef-padding-top" class="noxref"><span class="propinst-padding-top">'padding-top'</span></a> and <a href="box.html#propdef-padding-bottom" class="noxref"><span
class="propinst-padding-bottom">'padding-bottom'</span></a>.
</dl>

<P>Unlike margin properties, values for padding values cannot be
negative. Like margin properties, percentage values for padding
properties refer to the width of the generated box's containing block.

<div class="propdef">
<dl><dt>
<span class="index-def" title="'padding-top'"><a name="propdef-padding-top" class="propdef-title"><strong>'padding-top'</strong></a></span>, <span class="index-def" title="'padding-right'"><a name="propdef-padding-right" class="propdef-title"><strong>'padding-right'</strong></a></span>, <span class="index-def" title="'padding-bottom'"><a name="propdef-padding-bottom" class="propdef-title"><strong>'padding-bottom'</strong></a></span>, <span class="index-def" title="'padding-left'"><a name="propdef-padding-left" class="propdef-title"><strong>'padding-left'</strong></a></span>
<dd>
<table class="propinfo" cellspacing=0 cellpadding=0>
<tr valign=baseline><td><em>Value:</em>&nbsp;&nbsp;<td><a href="box.html#value-def-padding-width" class="noxref"><span class="value-inst-padding-width">&lt;padding-width&gt;</span></a> | <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>0
<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>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>
</table>
</dl>
</div>


<P>These properties set the top, right, bottom, and left padding of
a box.

<div class="example"><P style="display:none">Example(s):</P><P>
<PRE>
BLOCKQUOTE { padding-top: 0.3em }
</PRE>
</div>

<div class="propdef">
<dl><dt>
<span class="index-def" title="'padding'"><a name="propdef-padding" class="propdef-title"><strong>'padding'</strong></a></span>
<dd>
<table class="propinfo" cellspacing=0 cellpadding=0>
<tr valign=baseline><td><em>Value:</em>&nbsp;&nbsp;<td><a href="box.html#value-def-padding-width" class="noxref"><span class="value-inst-padding-width">&lt;padding-width&gt;</span></a>{1,4} | <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>not defined for shorthand properties
<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>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>
</table>
</dl>
</div>


<P> The <a href="box.html#propdef-padding" class="noxref"><span class="propinst-padding">'padding'</span></a> property is a
shorthand property for setting <a href="box.html#propdef-padding-top" class="noxref"><span
class="propinst-padding-top">'padding-top'</span></a>, <a href="box.html#propdef-padding-right" class="noxref"><span