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

> I don’t understand what it means for a 'margin' to be 'before' or 'after' an 'element.'

I'm not going to do a rigorous formal definition of all the terms in CSS2 here, so I'm just going to put this image from CSS Box:

![](https://github.com/user-attachments/assets/8f281ede-43f5-4e72-a7b1-dc6cd69f650b)

As you can see, the border box is surrounded by the margins. (And the content sizes, padding and borders can't be negative).

> I don't understand this sentence.

Does this look like there is a bottom margin below the outline? No.

```html
<div style="border: solid; width: 150px">
  <div style="margin: 50px; outline: dotted magenta"></div>
</div>
```

![](https://github.com/user-attachments/assets/1fe67970-4d06-4c54-a50c-bdfc1b9169e0)

> What is the specific case being discussed?

It's clearly the "top and bottom margins of a box that ..." (and other cases that you can obtain by transitivity).

I mean, in the top comment you used a quote that says "If the top and bottom margins of a box are adjoining", so I don't get the confusion.

> What does it mean for margins to collapse through an element in that case?

It means that the top and bottom margins of an element collapse.

> Could you provide complete HTML that can be examined in the developer tools to observe 'collapse through an element'?

See above. But developer tools frequently lie or show things that make no sense, especially in margin collapse situations. Like this blatant lie that doesn't show the margins as collapsing:

![](https://github.com/user-attachments/assets/d413f55c-4734-4504-8014-c06d47bf8db9)


> Yes, they still can have out-of-flow descendants

And they can have in-flow descendants too, thanks to transitivity ("A collapsed margin is considered adjoining to another margin if any of its component margins is adjoining to that margin.")



-- 
GitHub Notification of comment by Loirooriol
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11306#issuecomment-2511043026 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 09:46:03 UTC