- From: Oriol Brufau via GitHub <sysbot+gh@w3.org>
- Date: Fri, 18 Apr 2025 22:56:35 +0000
- To: public-css-archive@w3.org
Loirooriol has just created a new issue for https://github.com/w3c/csswg-drafts: == [css-align] Clarify how `justify-self` affects automatic size of block-level box == 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`](https://drafts.csswg.org/css-align/#valdef-justify-self-stretch) cause a [`width`](https://drafts.csswg.org/css-sizing-3/#propdef-width)/[`height`](https://drafts.csswg.org/css-sizing-3/#propdef-height) of [`auto`](https://drafts.csswg.org/css-sizing-3/#valdef-width-auto) to be treated as [`fit-content`](https://drafts.csswg.org/css-sizing-4/#valdef-width-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](https://github.com/servo/servo/pull/36595) (AFAIK the only implementations). However, @fantasai interpreted the spec as only using `fit-content` in over-constrained cases. ```html <!DOCTYPE html> <div style="width: 200px; border: solid magenta"> <div style="justify-self: right; border: solid"> <div style="width: 100px; height: 50px"></div> </div> </div> <div style="width: 200px; border: solid magenta" align="right"> <div style="border: solid"> <div style="width: 100px; height: 50px"></div> </div> </div> ``` | [Servo#36595](https://github.com/servo/servo/pull/36595), Blink | | - | |  | ### How do `auto` margins affect the above? ```html <!DOCTYPE html> <div style="width: 200px; border: solid magenta"> <div id="a" style="justify-self: right; border: solid"> <div style="width: 100px; height: 50px"></div> </div> <div id="b" style="justify-self: right; border: solid; margin: auto"> <div style="width: 100px; height: 50px"></div> </div> </div> ``` 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`](https://drafts.csswg.org/css-align/#propdef-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](https://github.com/servo/servo/pull/36595) | Blink | | - | - | |  |  | Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12102 using your GitHub account -- Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Friday, 18 April 2025 22:56:36 UTC