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

>The top margin is typically before the element, and the bottom margin after the element. 

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

>But here its top and bottom margins collapse even though the element would typically be in between

I don't understand this sentence.

The specs states:

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

The specs defines:

Two margins are adjoining if and only if:

- both belong to in-flow [block-level boxes](https://www.w3.org/TR/CSS2/visuren.html#block-boxes) that  participate in the same [block formatting context](https://www.w3.org/TR/CSS2/visuren.html#block-formatting)   
- no line boxes, no clearance, no padding and no border separate  them (Note that [certain zero-height line   boxes](https://www.w3.org/TR/CSS2/visuren.html#phantom-line-box) (see [9.4.2](https://www.w3.org/TR/CSS2/visuren.html#inline-formatting))  are ignored for this purpose.)   
- both belong to vertically-adjacent box edges, i.e. form one of  the following pairs:   
  - top margin of a box and top margin of its first in-flow child     
  - bottom margin of box and top margin of its next in-flow    following sibling     
  - bottom margin of a last in-flow child and bottom margin of its    parent if the parent has 'auto' computed height     
  - top and bottom margins of a box that does not establish a new    block formatting context and that has zero computed ['min-height'](https://www.w3.org/TR/CSS2/visudet.html#propdef-min-height), zero or 'auto'    computed ['height'](https://www.w3.org/TR/CSS2/visudet.html#propdef-height), and no    in-flow children  

1. What is the specific case being discussed? 

2. What does it mean for margins to **collapse through an element** in that case? 

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

-- 
GitHub Notification of comment by gitspeaks
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11306#issuecomment-2510925759 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 08:54:35 UTC