[css-align] 2nd pass through gutters section, mostly cleanup

Author: fantasai

css-align/Overview.bs

@@ -1587,19 +1587,21 @@ Self-Alignment Shorthand: the 'place-items' property</h3>
 <h2 id='gaps'>
 Gaps Between Boxes</h2>
 
-While 'margin' and 'padding' can be used to specify visual separation between individual boxes,
-it's sometimes more desirable to specify a "global" separation between entire groups of boxes
-within a given layout context.
-For example, an author may want some amount of empty space
-between the columns in the <a>multi-column element</a>,
-without having to individually tune the margins on every single child of the multicol.
+While 'margin' and 'padding' can be used to specify visual spacing around individual boxes,
+it's sometimes more convenient to globally specify spacing between adjacent boxes
+within a given layout context,
+particularly when the spacing is different between boxes
+as opposed to between the first/last box and the container's edge.
 
 The 'gap' property,
 and its 'row-gap' and 'column-gap' sub-properties,
-provide this functionality for some layout modes.
+provide this functionality for
+<a href="http://www.w3.org/TR/css3-multicol/">multi-column</a>
+<a href="http://www.w3.org/TR/css-flexbox/">flex</a>,
+and <a href="http://www.w3.org/TR/css-grid/">grid layout</a>.
 
 <h3 id='column-row-gap'>
-The 'column-gap', 'row-gap', and 'gap' Properties</h3>
+Row and Column Gutters: the 'row-gap' and 'column-gap' properties</h3>
 
 	<pre class='propdef'>
 	Name: row-gap, column-gap
@@ -1613,30 +1615,32 @@ The 'column-gap', 'row-gap', and 'gap' Properties</h3>
 	Animatable: as length, percentage, or calc
 	</pre>
 
-	These properties specify the <dfn export lt="gutter">gutters</dfn>
+	These properties specify fixed-length <dfn export lt="gutter">gutters</dfn>
 	between items in the container,
-	similar to the <a>content-distribution properties</a>.
+	adding space in a manner to the ''justify-content/space-between'' keyword
+	of the <a>content-distribution properties</a>,
+	but of a fixed size instead of as a fraction of remaining space.
+
 	Different layout modes interpret these slightly differently:
-	for Multicol Layout, it's the spacing between column boxes;
+	for Multi-column Layout, it's a minimum spacing between column boxes;
 	for Flex Layout, it's a minimum spacing between <a>flex items</a>
 	and/or <a>flex lines</a>;
 	for Grid Layout, it's a minimum spacing between <a>grid tracks</a>.
-
 	Regardless of layout mode, however,
 	the directions that these two properties apply in are constant.
-	'column-gap' indicates spacing between "columns"--
+	'column-gap' indicates spacing between “columns”--
 	it separates boxes in the container's <a>inline axis</a>,
 	similar to <a>inline-axis</a> 'margin'--
-	while 'row-gap' indicates spacing between "rows",
+	while 'row-gap' indicates spacing between “rows”,
 	separating boxes in the container's <a>block axis</a>.
 
-	Their values are defined as:
+	Values have the following meanings:
 
 	<dl dfn-type=value dfn-for="row-gap, column-gap, gap">
 		: <<length-percentage>>
 		::
-			Specifies a gap between "rows" or "columns".
-			Precisely what this means is defined by each layout mode;
+			Specifies a gap between “rows” or “columns”,
+			as defined by the layout modes to which it applies;
 			see subsections below for details.
 
 			Negative values are invalid.
@@ -1648,6 +1652,8 @@ The 'column-gap', 'row-gap', and 'gap' Properties</h3>
 			Issue: Should ''gap/normal'' just compute to ''1em'' in multicol?
 	</dl>
 
+	Note: Additional spacing may be added by 'justify-content'/'align-content'.
+	This space effectively increases the size of these <a>gutters</a>.
 
 <h4 id='gap-multicol'>
 Multicol Containers</h4>
@@ -1671,20 +1677,16 @@ Grid Containers</h4>
 	define the [=gutters=] between <a>grid rows</a> and <a>grid columns</a>.
 	See [[css-grid-1#gutters]] for precise details on how this works.
 
-	The ''gap/normal'' value behaves as ''0'' for both properties.
-
 <h4 id='gap-table'>
 Tables</h4>
 
 	Table boxes do not use the 'gap' properties to specify separation between their cells.
 	Instead, they use the 'border-spacing' property,
-	which has slightly different functionality--
+	which has slightly different functionality:
 	it inherits,
-	and it also specifies the separation between the outermost cells
-	and the border of the table.
-	(The 'gap' properties only specify separation between boxes in the container;
-	they rely on the author using 'padding' if they want separation
-	between the container's border and its contents.)
+	and it also specifies the additional spacing between the outermost cells
+	and the border of the table
+	(similar to ''space-evenly'' rather than ''space-between'').
 
 <h3 id='gap-shorthand'>
 Gap Shorthand: the 'gap' property</h3>
@@ -1721,7 +1723,7 @@ Legacy Gap Properties: the 'grid-row-gap', 'grid-column-gap', and 'grid-gap' pro
 
 	The Grid Layout module was originally written with its own set of [=gutter=] properties,
 	before all such properties were unified into the existing 'row-gap'/'column-gap' naming.
-	For legacy compatibility,
+	For compatibility with legacy content,
 	those legacy property names must be supported as aliases:
 
 	* <dfn property>grid-row-gap</dfn> must be treated as a shorthand for the 'row-gap' property
@@ -1731,7 +1733,6 @@ Legacy Gap Properties: the 'grid-row-gap', 'grid-column-gap', and 'grid-gap' pro
 	In all three cases, the legacy properties must take the same grammar as the property they are aliasing,
 	and just "forward" the value to their aliased property.
 
-
 <!--
 ████████     ███     ██████  ████████ ██       ████ ██    ██ ████████
 ██     ██   ██ ██   ██    ██ ██       ██        ██  ███   ██ ██