[CSS] Docs: Clarify margin collapse rule for parent/child scenarios#40349
Merged
[CSS] Docs: Clarify margin collapse rule for parent/child scenarios#40349
Conversation
github-actions
bot
added
Content:CSS
Contributor
|
Preview URLs (comment last updated: 2025-07-15 09:20:40) |
Josh-Cena
reviewed
Jul 14, 2025
| - : Specifically, this occurs in two main cases: | ||
| - The {{cssxref("margin-top")}} of a parent collapses with the {{cssxref("margin-top")}} of its first in-flow descendant unless the parent has a border-top, padding-top, contains any inline content (like text), or has _[clearance](/en-US/docs/Web/CSS/clear) applied. | ||
| - The {{cssxref("margin-bottom")}} of a parent collapses with the {{cssxref("margin-bottom")}} of its last in-flow descendant unless the parent has a defined {{cssxref("height")}} or {{cssxref("min-height")}}, a {{cssxref("border-bottom")}}, or {{cssxref("padding-bottom")}}. | ||
| - : In both cases, creating a new [block formatting context](/en-US/docs/Web/CSS/CSS_display/Block_formatting_context) on the parent will also prevent its margins from collapsing with its children. |
Member
There was a problem hiding this comment.
This is not how our DL syntax works. You can only have a single - : child. You have to write these as normal paragraphs.
…index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
…index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
estelle
approved these changes
Jul 15, 2025
Contributor
Author
|
You're welcome! 🎉 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
This PR proposes a small wording change to the section on parent/child margin collapsing to be more precise and easier to understand.
Motivation
The current text states that a parent's margin collapses with "one or more of its descendant blocks". While technically true in some complex edge cases, this can be misleading for the most common parent-child scenario. It might imply that a parent's margin could collapse with a grandchild, which is not the case.
Changing the wording to specify the "first descendant block" for margin-top and the "last descendant block" for margin-bottom is more precise and provides a clearer mental model for developers trying to understand this tricky concept.
Additional details
Suggested Change
I suggest changing the wording from:
To the more precise:
(And a similar change for the margin-bottom rule).
Related issues and pull requests