[css-multicol] Correct figures 10, 11 and 15 to use H2 standard font-size and margins and make margin belt of H2 element transparent

[TalbotG]

Example 20, figure 10 in section 6.1 'column-span'
All mainstream browsers have in their user agent style sheet:

h2 {font-size: 1.5em; margin: 0.83em 0;} [1]

but figures 10, 11 and 15 use a font-size of 18px (not 24px). Additionally, the vertical margins of the H2 element are painted light gray when the margin belt is - by definition - transparent [2]. This creates confusion and can lead to misinterpretation of the spec.

Proposal:

Figures 10, 11 and 15 should be redone so that H2 element use {font-size: 1.5em; margin: 0.83em 0;}. The SVG figures should render a transparent (and not light gray) gap of 19.92px above and below the H2 element.

More info:

Example 20, Figure 10 of Editor's draft: current and modified

[1]: to be more precise
-webkit-margin-before: 0.83em;
-webkit-margin-after: 0.83em;
and
margin-block-start: .83em;
margin-block-end: .83em;
is used

[2]
Margin belt is transparent in CSS2.x and CSS3. "Margin backgrounds are always transparent."
https://www.w3.org/TR/CSS22/box.html
There is no background-clip: margin-box in CSS3.

[rachelandrew]

In the example the spanner has a background of silver, it's not a margin. I'm not sure what you mean about background-clip.

[TalbotG]

the spanner has a background of silver

If the padding box has been painted silver, then why aren't there any vertical margins around (on top of and below) the h2 spanner? There should be a 19.92px (1.5 * 16px * 0.83) gap on top of and below the spanner (or a 1.5 * 18px * 0.83 == 22.41px gap on top of and below the spanner if the cascaded 1em font size is 18px).

If the margin box has been painted silver in the 3 examples and figures for illustration purposes, then that should be stated in the examples, otherwise it is source of confusion and misundertanding.

Margins are always transparent; both in CSS2.x and in CSS3 as well. You can not paint the margin belt of an element; even in CSS3, you can not paint the margin belt of an element. The background of other element (say, body element) behind an element shines through the margins of an element.

Vertical margins of H2 element are by default 0.83em in all mainstream browsers.

No matter how I look at these examples, there is source of confusion and misunderstanding.

[rachelandrew]

This issue was raised against previous versions of diagrams, perhaps before the initial diagram that explained what shades were being used to represent various components of the container was added. Closing as it doesn't relate to current diagrams. Always happy to receive updated diagrams from people better at drawing than I am, however!