[css-box-3] First draft of margin-trim. #3068 #2848

Author: fantasai

css-box-3/Overview.bs

@@ -281,6 +281,87 @@ Margin Shorthand: the 'margin' property {#margin-shorthand}
 		</pre>
 	</div>
 
+Margins at Container Edges: the 'margin-trim' property {#margin-trim}
+--------------------------
+
+	<pre class="propdef">
+		Name: margin-trim
+		Value: none | in-flow | all
+		Initial: none
+		Applies to: [=block containers=], [=multi-column containers=]
+		Inherited: no
+		Percentages: N/A
+		Computed value: keyword as specified
+		Animation type: discrete
+	</pre>
+
+	Oftentimes, margins are desired between siblings,
+	but not at the start/end of the container
+	where spacing can be controlled with padding.
+	This property allows the container
+	to trim the margins of its children
+	where they adjoin the container’s edges.
+	Values have the following meanings:
+
+	<dl dfn-type=value dfn-for=margin-trim>
+		<dt><dfn>none</dfn>
+		<dd>
+			Margins are not trimmed by the container.
+
+			Note: However, in block layout,
+			child margins can collapse with their parent.
+			See <a href="https://www.w3.org/TR/CSS2/box.html#collapsing-margins">CSS2&sect;8.3.1: Collapsing Margins</a>.
+
+		<dt><dfn>in-flow</dfn>
+		<dd>
+			For in-flow boxes contained by this box,
+			block-axis margins adjacent to the box’s edges
+			are truncated to zero.
+			It also truncates any margins collapsed with such a margin.
+
+		<dt><dfn>all</dfn>
+		<dd>
+			Trims the margins of in-flow boxes as for ''in-flow'',
+			but also trims any float margin
+			whose [=margin edge=] coincides
+			with the container’s [=content edge=].
+	</dl>
+
+	Specifically, for [=block containers=],
+	''margin-trim: in-flow'' or ''margin-trim: all'' discards:
+	<ul>
+		<li>The block-start margin of a block-level first child.
+		<li>The block-end margin of a block-level last child.
+		<li>Any margin collapsed with these margins.
+	</ul>
+
+	''margin-trim: all'' also affects floats
+	for which the [=block container=] is a [=containing block=] by:
+	<ul>
+		<li>
+			Discarding the [=block-start=] [=margin=] of any float
+			whose [=block-start=] [=outer edge=] coincides
+			with the [=block-start=] [=inner edge=] of the container.
+		<li>
+			Discarding the [=inline-start=]/[=inline-end=] [=margin=]
+			of an [=inline-start=]/[=inline-end=] float (or equivalent)
+			whose [=outer edge=] on that side coincides
+			with the [=inner edge=] of the container.
+		<li>
+			Zeroing the [=inline-axis=] margins of a float
+			for the purpose of calculating its [=intrinsic size contributions=]
+			or its [=size=] in the container’s [=inline axis=].
+		<li>
+			Trimming the [=block-end=] margins of a float
+			to the extent necessary to prevent such a margin
+			from extending the [=block size=]
+			of a [=block formatting context root=].
+	</ul>
+
+	ISSUE: Should this property apply to [=flex containers=] or [=grid containers=]?
+
+	ISSUE: Should floats have a <css>floats</css> value that only affects floats?
+
 Padding {#paddings}
 =======
 
@@ -374,9 +455,12 @@ Padding Shorthand: the 'padding' property {#padding-shorthand}
 Changes Since CSS Level 2 {#changes}
 =========================
 
-	There are no non-editorial changes since CSS Level 2,
-	other than adapting the prose slightly to account
-	for vertical <a>writing modes</a>.
+	The following changes have been made to this module
+	since <a href="https://www.w3.org/TR/CSS2/box.html">CSS Level 2</a>:
+	<ul>
+		<li>Adding the 'margin-trim' property.
+		<li>Adapting the prose slightly to account for vertical <a>writing modes</a>.
+	</ul>
 
 Privacy and Security Considerations {#priv-sec}
 ===============================================