W3C home > Mailing lists > Public > public-css-archive@w3.org > November 2020

Re: [csswg-drafts] [css-sizing-4] Add `margin-box` for box-sizing? (#5715)

From: Oriol Brufau via GitHub <sysbot+gh@w3.org>
Date: Wed, 11 Nov 2020 19:32:25 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-725618022-1605123144-sysbot+gh@w3.org>
I think margin collapse can make this confusing. Like if I have

```html
<div style="height: 100px; border-left: 10px solid">
  <p style="box-sizing: margin-box; height: 50%; margin: 20px 0; background: cyan"></p>
  <p style="box-sizing: margin-box; height: 50%; margin: 20px 0; background: cyan"></p>
</div>
```

then I would probably expect the content-area height of the `<p>` to be `40px`, so that `0px+40px+20px+40px+0px = 100px`. But if I have

```html
<div style="height: 100px; border-left: 10px solid; overflow: hidden;">
  <div style="display: flow-root"></div>
  <p style="box-sizing: margin-box; height: 50%; margin: 20px 0; background: cyan"></p>
  <div style="display: flow-root"></div>
  <p style="box-sizing: margin-box; height: 50%; margin: 20px 0; background: cyan"></p>
  <div style="display: flow-root"></div>
</div>
```

then I would probably expect the content-area height of the `<p>` to be `10px`, so that `20px+10px+20px+20px+10px+20px = 100px`.

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


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Wednesday, 11 November 2020 19:32:28 UTC

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:42:22 UTC