[css-rhythm-1] Add `content-box` to `block-step-insert` so authors can have content grow instead of adding space

[jensimmons]

In CSS Rhythm level 1 the block-step-insert property has two values: margin and padding, to specify whether the space added in order to step everything to the step unit is margin or padding. https://drafts.csswg.org/css-rhythm/#block-step-insert

I can imagine a lot of user cases where instead the author would want the content box to grow — for images, for instance. (Then object-fit: cover could be applied to the image, creating a slight crop, to get the image box to beautifully be the right height that's an increment of the step unit. And there is no "extra space".)

So let's change the definition to be:

Name: block-step-insert
Value: margin-box | padding-box | content-box

I like margin-box and padding-box better as well — since we aren't really adding to the margin or padding. The margin and padding will still be what they are, defined by the author/UA. We are adding extra space into the margin box or the padding box. These values make that more clear.

[fantasai]

Sounds pretty reasonable to me. And aligning the keywords with the other properties that take box values makes sense, too.

[jensimmons]

Here's a visual.

[css-meeting-bot]

The CSS Working Group just discussed [css-rhythm-1] Add `content-box` to `block-step-insert` so authors can have content grow instead of adding space, and agreed to the following:

• RESOLVED: Switch block-step-insert margin and padding values to margin-box | padding-box and add content-box, with attention to impact on aspect-ratio

The full IRC log of that discussion

<chrishtr> fantasai: this is an issue from jen where she pointed out that block-step-insert has two values: margin and padding. pointed out use cases for content.
<fantasai> block-step-insert: margin | padding
<chrishtr> fantasai: these names don't align with other naming
<fantasai> block-step-insert: margin-box | padding-box | content-box
<florian> s/us introducing more longhands/us introducing more longhands from the get go even when they're not needed yet when we can imagine needing them for a later extension of a feature
<chrishtr> fantasai: propose to change to add the -box suffix and also include the content variant
<florian> +1
<chrishtr> rossen: sounds reasonable, don't know why we didn't do content before
<chrishtr> fantasai: just because it's an early spec, probably accidental
<chrishtr> lwalrlow: has any implementation shipped?
<chrishtr> fantasai: no
<chrishtr> lwarlow: cool, then sounds good
<chrishtr> ikilpatrick: does setting this property effectively override aspect-ratio for an image?
<chrishtr> fantasai: yes. but maybe it shouldn't, good point?
<chrishtr> ikilpatrick: if it doesn't override aspect-ratio, how does it work with the original use case mentioned?
<chrishtr> fantasai: if you set a fixed width it's like setting a height which affects aspect-ratio
<chrishtr> fantasai: but if width were auto then maybe it makes sense for it to pass through
<chrishtr> ikilpatrick: stretch is also involved
<chrishtr> ikilpatrick: for grid and flex
<chrishtr> fantasai: currently this property doesn't apply to flex or grid, but might happen in the future
<chrishtr> ikilpatrick: concerned about all sorts of complications for replaced elements
<chrishtr> fantasai: should probably enter the algorithm in a similar place to min-height and min-width
<chrishtr> ikilpatrick: Just needs to be documented explicitly in the spec as to where it is in the order of operations. probably twice, similar to aspect-ratio
<chrishtr> fantasai: should be doable for block flow, but flex and grid could be more complicated
<chrishtr> ikilpatrick: more concerned about replaced elements than flex or gird
<chrishtr> fantasai: will write up proposed edits and send to you (ikilpatrick) for review
<chrishtr> rossen: are we good to go for the proposed resolution?
<Rossen7> q?
<chrishtr> fantasai: yes, just need to be careful about replaced element
<fantasai> RESOLVED: Switch block-step-insert margin and padding values to margin-box | padding-box and add content-box, with attention to impact on aspect-ratio