- 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