[csswg-drafts] [css-sizing] Stretch size with margins, in block with inline parent (#13260)

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

== [css-sizing] Stretch size with margins, in block with inline parent ==
In #11044 we didn't consider what happens if the block is inside an inline formatting context.

```html
<!DOCTYPE html>
<style>
article { display: inline-block; width: 100px; height: 100px; border: solid; }
div { margin: 25px; height: stretch; background: cyan; }
</style>
<article>
  <div></div>
</article>
<article>
  <span>
    <div></div>
  </span>
</article>
<article>
  <span style="border: solid magenta">
    <div></div>
  </span>
</article>
```

| Blink | Servo |
| - | - |
| <img width="335" height="219" alt="Image" src="https://github.com/user-attachments/assets/f40627c9-51e4-4bfe-9829-1d13488bd32f" /> | <img width="335" height="219" alt="Image" src="https://github.com/user-attachments/assets/b7d9a939-24b9-444b-9174-ce4b4c194339" /> |

The Blink behavior follows from the fact that a block-level inside an inline gets wrapped inside an anonymous block. This anonymous block is then the parent and has no border nor padding, and doesn't establish a BFC.

But it seems weird to me, because the stretch size comes from the containing block.

So if the block is inside an inline, I think we should either:
 - Check the containing block, instead of the inline or anon-block parent
 - Never treat the margins as zero

Currently Servo does the former, because we split the inline, so the parent is actually the containing block. I plan to stop splitting inlines in a way that will align us with Blink, but then I will try to get rid of these anon blocks.

@davidsgrogan 


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


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

Received on Tuesday, 23 December 2025 03:05:24 UTC