[css-multicol] clarification and example with regard to nested spanners and their containing block #1072

Author: rachelandrew

css-multicol-1/Overview.bs

@@ -810,6 +810,43 @@ Spanning columns</h2>
 		</figure>
 	</div>
 
+	A spanning element may be lower than the first level of descendants as long as they are part of the same formatting context. If the fragment before the spanner is empty, nothing special happens; the top margin/border/padding is above the spanning element, as an empty fragment.
+
+	<div class="example">
+		In this example the multicol container is the article element. Inside this parent is a paragraph and then a section element. The section contains an h2 heading set to ''column-span/all'' this spans all three columns while the containing section remains inside the column boxes.
+
+		The h2 is the first child of the section. This means that the margin, border (shown in red in the diagram) and padding on this section appear before the spanning h2 as an empty fragment.
+
+		<pre highlight="markup">
+		&lt;article&gt;
+			&lt;p&gt;...&lt;/p&gt;
+			&lt;section&gt;
+				&lt;h2&gt;An h2 element&lt;/h2&gt;
+				&lt;p&gt;...&lt;/p&gt;
+			&lt;/section&gt;
+		&lt;/article&gt;
+		</pre>
+
+<pre highlight="css">
+section {
+	border: 2px solid red;
+	margin-top: 3em;
+	padding-top: 2em;
+}
+
+h2 { 
+	column-span: all; 
+	background: silver 
+}
+</pre>
+
+	<figure>
+		<img src="images/nested-spanner.svg" alt="An element spans all three columns, the red border around the section breaks before the spanner.">
+		<figcaption>The h2 element is set to column-span: all, the section has a red border and top padding and margin</figcaption>
+	</figure>
+
+	</div>
+
 	A spanning element takes up more space than the element would take
 	up otherwise. When space is limited, it may be impossible to find room
 	for the spanning element. In these cases, user agents may treat the
@@ -1173,6 +1210,7 @@ This appendix is <em>informative</em>.
 	<li>Replaced the HTML mock-up examples with SVG versions, as the examples were unclear. <a href="https://github.com/w3c/csswg-drafts/issues/1087">Issue 1087</a>.</li>
 	<li>Changed the value of normal for column-gap to be 1em, rather than a UA-specified length with a suggestion of 1em. <a href="https://github.com/w3c/csswg-drafts/issues/2145#issuecomment-378781507">Resolved: 4 Apr 2018</a></li>
 	<li>Clarified that negative values are not allowed for column-width, and that while 0 may be specified, used values will be clamped to a minimum of 1px. <a href="https://github.com/w3c/csswg-drafts/issues/1741#issuecomment-373091628">Resolved: 14 Mar 2018</a></li>
+	<li>Added clarification plus an additional example that spanning elements may be lower the the first level of descendents, and that in the case of margins, borders and padding on the element containing the spanning, this would be drawn above the spanner. <a href="https://github.com/w3c/csswg-drafts/issues/1072#issuecomment-342668025">Resolved: 8 Nov 2017</a></li>
     <li>Changed the sentence <em>Column rules are painted in the inline content layer, but below all inline content inside the multicol element.</em> to <em>Column rules are painted just above the border of the multicol element. For scrollable multicol elements, note that while the border and background of the multicol element obviously aren’t scrolled, the rules need to scroll along with the columns.</em> <a href="https://github.com/w3c/csswg-drafts/issues/1739#issuecomment-342659978">Resolved: 7 Nov 2017</a></li>
 	<li>Under section The Multi-column Model, removed two sentences <em>That is, column boxes behave like block-level, table cell, and inline-block boxes as per CSS 2.1, section 10.1, item 2 CSS21. However, column boxes do not establish block container boxes for elements with ''position: fixed or position: absolute''.</em>. THese were replaced with a clarification about the principal box and a new example showing how abspos elements refer to the multicol container. <a href="https://github.com/w3c/csswg-drafts/issues/1738#issuecomment-342661881">Resolved: 7 Nov 2017</a></li>
     <li>Removed the sentence "To indicate where column breaks should (or should not) appear, new keyword values are introduced." and following example (Example 7 in the WD published <a href="https://www.w3.org/TR/2017/WD-css-multicol-1-20171005/">5 Oct 2017</a>) as the multicol specification no longer introduces these properties. <a href="https://github.com/w3c/csswg-drafts/issues/1966">Editorial</a></li>