Re: [csswg-drafts] [css-sizing-4] How does height: stretch interact with margin collapsing with parent (#11044)

> Wouldn't they affect if bottom margins are adjoining?

No, see here, the bottom margins are adjoining despite the float:

```html
<!DOCTYPE html>
<div style="outline: solid">
  <div style="display: flow-root; width: 100px; height: 100px; margin-bottom: 50px; background: cyan"></div>
  <div style="float: left; width: 50px; height: 50px; background: magenta"></div>
</div>
aaaaa
```

![](https://github.com/user-attachments/assets/923e423f-bbf8-4c50-94e0-37d1d53db93f)


> This makes Tab's https://github.com/w3c/csswg-drafts/issues/11044#issuecomment-2486584397 look attractive for ease of implementation

Maybe so, I think with floats we get into broken cases no matter what.

E.g. here we could assume that the top margin won't be adjoining because of the float, and the bottom will be adjoining, so we resolve to `height: 80px`. But oops, while indeed the float prevents the top margin from being adjoining, it triggers a negative clearance, so the bottom margin doesn't look adjoining as we intented:

```html
<!DOCTYPE html>
<div style="float: left; width: 50px; height: 10px; background: magenta"></div>
<div style="outline: solid; height: 100px; width: 100px">
  <div style="display: flow-root; width: 60px; height: /*stretch*/ 80px; margin: 20px; background: cyan"></div>
</div>
```

![](https://github.com/user-attachments/assets/1999dd57-a600-4907-ba99-c99be3fb9fd6)

And here the clearance is positive so it overflows:

```html
<!DOCTYPE html>
<div style="float: left; width: 50px; height: 30px; background: magenta"></div>
<div style="outline: solid; height: 100px; width: 100px">
  <div style="display: flow-root; width: 60px; height: /*stretch*/ 80px; margin: 20px; background: cyan"></div>
</div>
```

![](https://github.com/user-attachments/assets/42ccd431-fa41-49ad-a158-296a93080703)

So just like we accept that `stretch` won't look good if there are siblings, it's probably fine to also accept that if there are floats.


-- 
GitHub Notification of comment by Loirooriol
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11044#issuecomment-2486935794 using your GitHub account


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

Received on Tuesday, 19 November 2024 23:11:03 UTC