Repository navigation
Conversation
…ne pushes the content after it down by its margin
<div style="float: left; height: 120px"></div>
<span>
<div style="clear: both; height: 0; margin-top: 50px"></div>
</span>
foo
Clearance sits above the box's margin (CSS 2.2 9.5.2), so the 50px is already inside the space the clearance took
and "foo" belongs at the float's bottom edge. It ends up 50px lower.
A box whose margins collapse through keeps them for the content after it (CSS 2.2 8.3.1, "If the top and bottom
margins of an element with clearance are adjoining, its margins collapse with the adjoining margins of following
siblings"), and block layout applies them from the box's margin box top rather than from where its border box
ended up, which is also what the spec asks for: "the positions of elements that have been collapsed through have
no effect on the positions of the other elements with whose margins they are being collapsed". It does that by
taking the container's height back to that position before the collapsed margin goes on.
A line has no such position to take back. It starts where the content before it ended, which for this box is its
border box, and the margin then goes on top of that.
The clearance sits between the two margins ("because the margins no longer collapse with a clearance between them",
CSS 2.2 9.5.2 example 1), so the box's margin before is behind that border box already and only the rest of the
collapsed margin is left for the content after it. Carry that margin in the margin state, next to the margin
itself, and take it off what a line places.
WebKit-Bug: https://bugs.webkit.org/show_bug.cgi?id=321643
WebKit-Canonical-Link: https://commits.webkit.org/319160@main
wpt-pr-bot
approved these changes
Oct 25, 2026
wpt-pr-bot
left a comment
wpt-pr-bot
left a comment
Collaborator
There was a problem hiding this comment.
The review process for this patch is being conducted in the WebKit project.
annevk
enabled auto-merge (rebase)
October 25, 2026 08:54
This branch has not been deployed
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
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.
WebKit export from bug: [block-in-inline] A box that collapsed through with clearance on a line pushes the content after it down by its margin
[block-in-inline] A box that collapsed through with clearance on a line pushes the content after it down by its margin <div style="float: left; height: 120px"></div> <span> <div style="clear: both; height: 0; margin-top: 50px"></div> </span> foo Clearance sits above the box's margin (CSS 2.2 9.5.2), so the 50px is already inside the space the clearance took and "foo" belongs at the float's bottom edge. It ends up 50px lower. A box whose margins collapse through keeps them for the content after it (CSS 2.2 8.3.1, "If the top and bottom margins of an element with clearance are adjoining, its margins collapse with the adjoining margins of following siblings"), and block layout applies them from the box's margin box top rather than from where its border box ended up, which is also what the spec asks for: "the positions of elements that have been collapsed through have no effect on the positions of the other elements with whose margins they are being collapsed". It does that by taking the container's height back to that position before the collapsed margin goes on. A line has no such position to take back. It starts where the content before it ended, which for this box is its border box, and the margin then goes on top of that. The clearance sits between the two margins ("because the margins no longer collapse with a clearance between them", CSS 2.2 9.5.2 example 1), so the box's margin before is behind that border box already and only the rest of the collapsed margin is left for the content after it. Carry that margin in the margin state, next to the margin itself, and take it off what a line places. WebKit-Bug: https://bugs.webkit.org/show_bug.cgi?id=321643 WebKit-Canonical-Link: https://commits.webkit.org/319160@main