[css2] Moved section on collapsing margins here. Clearly defined (I think) collapsing margin

ianbjacobs · ianbjacobs · commit 21bbcaf660fc · 1998-03-22T02:02:16.000Z
--HG--
extra : convert_revision : svn%3A73dc7c4b-06e6-40f3-b4f7-9ed1dbc14bfc/trunk%401325
diff --git a/css2/box.src b/css2/box.src
@@ -1,6 +1,6 @@
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 <html lang="en">
-<!-- $Id: box.src,v 1.6 1998-03-17 08:19:42 ijacobs Exp $ -->
+<!-- $Id: box.src,v 1.7 1998-03-22 02:02:16 ijacobs Exp $ -->
 <HEAD>
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
 <TITLE>Box model</TITLE>
@@ -156,7 +156,7 @@ block</a> for the each LI box is the box generated by the UL element.
 <li>The height of each LI box is given by its <a
 href="#content-height">content height</a>, plus padding, borders, and
 margins. Note that vertical margins between the LI boxes <a
-href="visudet.html#collapsing-margins">collapse.</a>
+href="#collapsing-margins">collapse.</a>
 
 <li>The right padding of the LI boxes has been set to zero width
 (the <span class="propinst-padding">'padding'</span> property). The
@@ -207,9 +207,7 @@ for behavior.
 </dl>
 
 <P>Negative values for margin properties are allowed, but there may be
-implementation-specific limits.  Percentage values for margin
-properties refer to the width of the generated box's <a
-href="visuren.html#containing-block">containing block</a>.
+implementation-specific limits. 
 
 <!-- #include src=properties/margin-top.srb -->
 
@@ -295,6 +293,42 @@ below:
 </PRE>
 </div>
 
+<H3><a name="collapsing-margins">Collapsing margins</a></H3>
+
+<P>In this specification, the expression <span class="index-def"
+title="collapsing margin"><dfn>collapsing margins</dfn></span> 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, <span class="index-inst" title="horizontal
+margin|margin::horizontal">horizontal margins</span> never collapse.
+
+<P><span class="index-inst" title="vertical margin|margin::vertical">
+Vertical margins</span> 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">floating</a> box and any other box do not
+collapse.
+
+<li>Margins of absolutely positioned boxes do not collapse.
+</ul>
+
+<P>In most cases, after collapsing the vertical margins, the result is
+visually more pleasing and closer to what the designer expects. Please
+consult the <a href="#mpb-examples">examples of margin, padding, and
+borders</a> for an illustration of collapsed margins.
+
 <H2><a name="padding-properties">Padding properties</a>:
 <span class="propinst-padding-top">'padding-top'</span>,
 <span class="propinst-padding-right">'padding-right'</span>,
@@ -414,6 +448,8 @@ font in use.
 href="#box-border-area">border area</a> of a box. These
 properties apply to all elements.
 
+
+<!-- Was this to be removed?
 <div class="note"><P>
 <em><strong>Note.</strong>
 Notably for HTML, 
@@ -422,6 +458,7 @@ tables, buttons, menus, etc.) differently than for
 "ordinary" elements.
 </em>
 </div>
+-->
 
 <H3><a name="border-width-properties">Border width</A>: <span
 class="propinst-border-top-width">'border-top-width'</span>, <span
