[csswg-drafts] [css-gaps-1] Insets instead of outsets (#12848)

kbabbitt has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-gaps-1] Insets instead of outsets ==
This came up while I was working on spec changes for the resolutions we took in https://github.com/w3c/csswg-drafts/issues/12024#issuecomment-3206577879 and https://github.com/w3c/csswg-drafts/issues/12603#issuecomment-3206613011.

Right now, fine adjustments to gap decoration endpoints are specified as outsets. At the edges of containers, positive values protrude beyond the content edge, negative values recede from it. At interior intersections, positive values protrude into the intersection, negative values recede from it. See the examples starting here: https://www.w3.org/TR/css-gaps-1/#example-74d806b0

The reasoning for representing these as outsets fell out of the fact that `column-rule-outset` and `row-rule-outset` each took a single value. I wanted that single value to, by default, do the most commonly wanted thing for a grid: decorations flush with the content edges and continuing through intersections. I achieved that by setting the initial value to `50%` and defining the percentage basis to be the crossing gap width at an intersection and 0 at the container edge. (The same examples linked previously illustrate this.)

The key assumptions underpinning that reasoning were negated by the resolutions we took in 12024 and 12603. We will now have separate properties for offsets at edges versus interior intersections, and percentages will resolve with the same basis for both. Given those changes, I think expressing these adjustments as insets rather than outsets would be more intuitive:

-----

<img src="https://www.w3.org/TR/css-gaps-1/images/example-column-outset-0px.png">

```css
column-rule-break: intersection;
column-rule-inset: 0px;
```

-----

<img src="https://www.w3.org/TR/css-gaps-1/images/example-column-outset-minus-5px.png">

```css
column-rule-break: intersection;
column-rule-inset: 5px;
```

-----

<img src="https://www.w3.org/TR/css-gaps-1/images/example-column-outset-5px.png">

```css
column-rule-break: intersection;
column-rule-inset: -5px;
```

-----

<img src="https://www.w3.org/TR/css-gaps-1/images/example-column-outset-50percent.png">

```css
column-rule-break: intersection;
column-rule-edge-inset: 0px;
column-rule-interior-inset: 50%;
```

-----


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12848 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 23 September 2025 23:24:14 UTC