adding example on margin collapsing

Author: howcome

css-multicol/Overview.src.html

@@ -305,6 +305,8 @@ <h2>The multi-column model</h2>
 functionality. For example, columns of different widths and different
 backgrounds may be supported.</p>
 
+<p>This specification follows the <a href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property definition conventions</a> from [[!CSS21]]. 
+
 
 <div class="example">
 
@@ -560,6 +562,20 @@ <h2>The multi-column model</h2>
 implementation-specific limits.
 
 
+<h3>Properties and values</h3>
+
+<p>This specification follows the <a href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS
+property definition conventions</a> from [[!CSS21]].
+The <dfn><var>&lt;color&gt;</var></dfn> value type is defined by
+[[CSS3COLOR]].
+
+<p>In addition to the property-specific values listed in their definitions,
+all properties defined in this specification also accept the
+<a href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a>
+keyword as their property value. For readability it has not been repeated
+explicitly.
+
+
 <h2>The number and width of columns</h2>
 
 <p>Finding the number and width of columns is fundamental when laying
@@ -673,9 +689,8 @@ <h3 id='cw'>'column-width'</h3>
 
 <p class=note>The reason for making 'column-width' somewhat flexible
 is to achieve scalable designs that can fit many screen sizes. To set
-an exact column width, all length values (in horizontal text these
-are: 'width', 'column-width', 'column-gap', and 'column-rule-width')
-must be specified.</p>
+an exact column width, the column gap and the width of the multicol
+element (assuming horizontal text) must also be specified.</p>
 
 
 <h3 id='cc'>'column-count'</h3>
@@ -1151,7 +1166,7 @@ <h3>'break-before', 'break-after', 'break-inside'</h3>
       <td>N/A
     <tr>
       <td><em>Media:</em>
-      <td>paged
+      <td>visual
     <tr>
       <td><em>Computed&nbsp;value:</em>
       <td>specified value
@@ -1181,7 +1196,7 @@ <h3>'break-before', 'break-after', 'break-inside'</h3>
       <td>N/A
     <tr>
       <td><em>Media:</em>
-      <td>paged
+      <td>visual
     <tr>
       <td><em>Computed&nbsp;value:</em>
       <td>specified value
@@ -1213,7 +1228,7 @@ <h3>'break-before', 'break-after', 'break-inside'</h3>
       <td>N/A
     <tr>
       <td><em>Media:</em>
-      <td>paged
+      <td>visual
     <tr>
       <td><em>Computed&nbsp;value:</em>
       <td>specified value
@@ -1359,7 +1374,6 @@ <h3>'column-span'</h3>
 
 <pre class="css">
 h2 { column-span: all; background: silver } 
-img { display: none }
 </pre>
 
 <p>By setting 'column-span' to ''all'', all content that appear before
@@ -1616,6 +1630,69 @@ <h3>'column-span'</h3>
 </div>
 
 
+<div class="example">
+
+<p>Spanners create new block formatting contexts, but their margins
+can be changed by their surroundings. In this example, two spanners
+naturally end up at the top of a page. The top margin of the first
+spanner is truncated due to being after an unforced break. The bottom
+margin of the first spanner collapses with the top margin of the
+second spanner. The bottom margin of the second spanner collapses with
+the top margin of the subsequent element.
+
+
+<pre class="css">
+h2 { 
+  margin: 0.5em 0;
+  column-span: all; 
+  background: silver 
+} 
+</pre>
+
+
+<div class=cols>
+
+<p><br><br><br><br>
+
+M nop qrst uv wx yz.<br>
+Ab cde fgh i jkl. Mno<br> 
+pqr stu vw xyz. A bc<br>
+def g hij klm nopqrs<br>
+tuv wxy z. Abc de fg<br>
+hi jklmno. Pqrstu vw<br>
+
+
+
+<div class="col" style="left: 175px">
+<p><br><br><br><br>
+x yz. Abc def ghi jkl.<br>
+M nop qrst uv wx yz.<br>
+Ab cde fgh i jkl. Mno<br> 
+pqr stu vw xyz. A bc<br>
+def g hij klm nopqrs<br>
+tuv wxy z. Abc de fg<br>
+
+
+</div>
+
+<div class="col" style="left: 350px">
+<p><br><br><br><br>
+hi jklmno. Pqrstu vw<br>
+x yz. Abc def ghi jkl.<br>
+M nop qrst uv wx yz.<br>
+Ab cde fgh i jkl. Mno<br> 
+pqr stu vw xyz.
+
+</div>
+
+<div class=rep style="width: 490px; top: 0; height: 20px; background: silver; font-size: 1.5em; padding: 5px">An H2 element</div>
+<div class=rep style="width: 490px; top: 40px; height: 20px; background: silver; font-size: 1.5em; padding: 5px">Another H2 element</div>
+<div class=gap style="top: 80px; left: 150px"></div>
+<div class=gap style="top: 80px; left: 325px"></div>
+</div>
+
+</div>
+
 
 
 <h2>Filling columns</h2>