[css-align] Clarify how justify-self affects automatic size of block-level box · Issue #12102 · w3c/csswg-drafts (original) (raw)

I'm quite puzzled by other implementers and even spec editors interpreting the spec in ways that seem weird to me, so let's clarify the behavior.

How does justify-self affect the automatic size of a block-level box?

I think https://drafts.csswg.org/css-align/#justify-self-property is clear:

Values other than stretch cause a width/height of auto to be treated as fit-content.

So the automatic size only stretches with justify-self: stretch (or auto/normal that behave as stretch).

As discussed in #11463, this behavior differs from <center> and align="". But it's consistent with flex items, grid items, and abspos, so I think it's the reasonable thing to do.

It's also how it works in Blink and Servo#36595 (AFAIK the only implementations).

However, @fantasai interpreted the spec as only using fit-content in over-constrained cases.

Servo#36595, Blink

How do auto margins affect the above?

In this example, both #a and #b should be sized as fit-content as per the above. Then, #b has auto margins, so it should appear centered instead of aligned to the right.

However, presumably because of

Note: auto margins, because they effectively adjust the size of the margin area, take precedence over justify-self.

Blink interprets that auto margins completely nullify justify-self: right, and thus #b stretches as for justify-self: normal.

I think that's very unexpected, my interpretation of the note is that margin: auto will center even with justify-self: right, but that it doesn't prevent justify-self: right from affecting the size.

Servo#36595	Blink