W3C home > Mailing lists > Public > public-css-archive@w3.org > February 2018

Re: [csswg-drafts] [CSS2][CSSOM] Used value of margin properties

From: Morten Stenshorne via GitHub <sysbot+gh@w3.org>
Date: Mon, 19 Feb 2018 10:10:26 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-366643420-1519035025-sysbot+gh@w3.org>
Right, Firefox doesn't resolve auto. I somehow failed to realize that.

One problem here is that, in order to honor the spec, user agents need to calculate values that the layout engine typically never uses. E.g. for a regular block in LTR, you never need to bother with the right margin at all. Just get the left margin correct. Still, the spec currently requires us to calculate a value for margin-right, so that we satisfy the constraint (width + fluff == containing block width).

Here's a more interesting test:

```html
<div style="width: 400px;">
  <div style="float:left; width:100px; height:10px;"></div>
  <div id="elm" style="overflow:hidden; margin:auto; width:100px;"></div>
</div>
```

What's the used/resolved margin-left and margin-right here? We have a float that pushes #elm 100px to the right before we apply auto margins. So we have this: 100px of float, 100px of left margin, 100px of #elm border box and, finally 100px of margin right.

To satisfy the constraint, the sum of the used margins and the border box need to equal the width of the containing block, i.e. 400px. So it seems to me that the correct implementation would be to calculate a used margin-left of 200px and used margin-right of 100px. I've found no browser that does this. Chrome has margin-left:100px and margin-right:200px (weird!), while Edge pretends that the float isn't there (for the sake of getComputedStyle()) and has margin-left:150px and margin-right:150px. I guess this just goes to show that the current spec forces browsers to calculate values that are not needed by layout.

I think margins are really special here (due to 'auto' and over-constrainedness), and that it doesn't make sense to see how other properties are treated and compare with that.

-- 
GitHub Notification of comment by mstensho
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2328#issuecomment-366643420 using your GitHub account
Received on Monday, 19 February 2018 10:10:31 UTC

This archive was generated by hypermail 2.4.0 : Thursday, 24 March 2022 20:26:46 UTC