[csswg-drafts] [css-sizing-3] border-collapse: padding-box (#7770)

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

== [css-sizing-3] border-collapse: padding-box ==
I believe CSS borders and padding would be more intuitive if borders could collapse into padding.

<figure><img src="https://user-images.githubusercontent.com/188426/191312803-62f812e4-936d-4657-b8da-f98d3a4e8d57.png" alt="described below" /><figcaption><i>A css-like box model which depicts margin, border, padding, and content. In the model, border is shown as being a portion of padding.</i></figcaption></figure>

<br /><br />

To produce consistent inner-spacing when styling elements that require padding and border, I have to use _tricks_ to have their total size collapsed rather than additive.

For example. if a designer hands over a design that depicts a _1px border with 4px padding_, I am usually **not** being asked to produce CSS like this:

```css
.the-design {
  border: 1px solid;
  padding: 4px;
}
```

Rather, I am actually being asked to produce CSS like this:

```css
.the-design {
  border: 1px solid;
  padding: 3px;
}
```

I think this is _tricky_ CSS, because the 3px of padding are an implicit pre-calculation of the desired 4px padding without the 1px of border. If I really want to preserve the intent of the design, I can write the same thing with custom properties and a calculation:

```css
.the-design {
  --border-size: 1px;
  --padding-size: 4px;
  border: var(--border-size) solid;
  padding: calc(var(--padding-size) - var(--border-size));
}
```

I may end up with code like the example above, if the assignment involves pre-existing custom property _tokens_. I can also avoid the calculation if I create the ‘border’ with an inset box shadow:

```css
.the-design {
  box-shadow: 0 0 0 var(--spacing-1) inset;
  padding: var(--spacing-4);
}
```

In reality, there is usually more to the design and more to the tokens, but I hope this illustrates the point.

Now, when I implement the design and hand it over to another developer, they either need to know the collapsing behavior and which tricks I used to accomplish it, or they need to use custom property abstractions like the earlier example.

I believe the issue is that the default border spacing behavior is not intuitive when inner spacing conceptually includes both padding and border. With the default behavior, as soon as an element has border applied, the actual rendered padding _appears_ larger than the padding that I originally set.

I understand that **border** and **padding** are separate parts of the box model, but I believe developers and designers think about `padding` as a kind of **inner-spacing**. In a similar way, I believe developers and designers think about `width` and `height` as a kind of **outer-spacing**, which is why they may prefer `box-sizing: border-box`.

In that spirit, I would recommend CSS provide something like `border-collapse: padding-box`, to allow borders to collapse into the available spacing of an element, just as `box-sizing: border-box` allowed borders to collapse in the available sizing of an element.

I believe others would benefit from this feature. Here are some examples where _tricks_ are used in the wild.

#### Example: Dell Design System

The Dell Design System describes spacing in [multiples of 4 pixels](https://www.delldesignsystem.com/foundations/grid/#vertical-spacing). A button is given [inner spacing](https://vanilla.delldesignsystem.com/2.11.0/index.html?path=/docs/components-button--basic#sizes) and [outer spacing](https://www.delldesignsystem.com/components/button/#specifications) of 12px, 16px, and 20px. However, a look at the implementation shows the padding values are actually 11px, 15px, and 19px. This is done to account for the additional 1px of border.

#### Example: Hashicorp Design System

The Hashicorp Design System maintains its vertical rhythm by omitting 1px from each side of padding, and [a note regarding this pre-calculation](https://github.com/hashicorp/design-system/blob/main/packages/components/app/styles/components/button.scss#L120) is preserved in the source code.

#### Example: Carbon Design System

The Carbon Design System [meticulously documents spacing as tokens](https://carbondesignsystem.com/guidelines/spacing/overview/). However, looking at the CSS, the offsets for border are ultimately [hard-coded](https://carbondesignsystem.com/components/button/code/#live-demo).

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


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

Received on Tuesday, 20 September 2022 16:58:13 UTC