Re: [csswg-drafts] [CSS2] Clarify margin collapsing behavior (#11306)

Ok, now that we are on the same page:

> Given an element E, we say that margins can collapse through E if the top margin of E adjoins some margin external to E and the bottom margin of E adjoins another margin external to E.

> No, this condition is not sufficient. Counterexample: an element that establishes an independent formatting context.

I agree. However, strictly speaking, the first interpretation is also an insufficient condition since there is no mention that E's box does not establish a new block formatting context, has a computed `min-height` of `0`, a computed `height` of `0` or `auto`, and no in-flow children. So, let’s assume there are additional conditions that make this case applicable.

Now, let’s revisit the HTML example I posted:

```css
  * {
    margin: 0;
    padding: 0;
  }

  .divs {
    background: lightgray;
    width: 600px;
    height: 60px;
  }
  .collapsed {
    background: lightpink;
    width: 600px;
    height:0;
    margin-top: 60px;
    margin-bottom: 30px;
  }  
```

```html
<div class="divs" style="margin-bottom: 120px;"></div>
<div class="collapsed"></div>
<div class="divs" style="margin-top: 10px;"></div>
 ```

According to your previous [comment](https://github.com/w3c/csswg-drafts/issues/11306#issuecomment-2511316340), the `1st-div` and `3rd-div` "collapse-through" by transitivity. 

Let’s break down how this can happen:

The `2nd-div` collapses margins according to the condition:

>top and bottom margins of a box that does not establish a new block formatting context and that has zero computed 'min-height', zero or 'auto' computed 'height', and no in-flow children 

Let’s call the resulting collapsed margin **C**.

The [spec](https://drafts.csswg.org/css2/#collapse-through) states:

> If the top and bottom margins of a box are adjoining, then it is possible for margins to collapse through.

So the `2nd-div` margins are said to 'collapse-through'.

Clearly:

- The `1st-div`'s `margin-bottom: 120px` adjoins the `2nd-div`'s `margin-top: 60px`.
- The `3rd-div`'s `margin-top: 10px` adjoins the `2nd-div`'s `margin-bottom: 30px`.


According to the spec:

> A collapsed margin is considered adjoining to another margin if any of its component margins is adjoining to that margin.

It follows that:

- The `1st-div`'s `margin-bottom: 120px` adjoins **C**.
- The `3rd-div`'s `margin-top: 10px` adjoins **C**.

Thus:

- The `1st-div`'s `margin-bottom: 120px` collapses with **C** (60).
- The `3rd-div`'s `margin-top: 10px` collapses with **C** (60).


Now, we have:

- The `1st-div`'s `margin-bottom: 120px` adjoining the `3rd-div`'s `margin-top: 60px`.

From this, the `1st-div`'s `margin-bottom: 120px` and the `3rd-div`'s `margin-top: 60px` collapse.

However, the `1st-div`'s `margin-bottom: 120px` and the `3rd-div`'s `margin-top: 60px` are **not margins of the same box**. 

This means that the `1st-div margin` and the `3rd-div margin` do not "collapse through" as defined by the spec. It is unclear what it would even mean for them to "collapse through" C. Therefore, I don’t understand what you think they are collapsing through `div.collapsed` collapsed (through) margin via transitivity.

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


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

Received on Monday, 2 December 2024 22:51:44 UTC