Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[css-break] How to treat float margins? #9191

Open
mstensho opened this issue Aug 15, 2023 · 0 comments
Open

[css-break] How to treat float margins? #9191

mstensho opened this issue Aug 15, 2023 · 0 comments
Labels
css-break-3 Current Work

Comments

@mstensho
Copy link

mstensho commented Aug 15, 2023

https://www.w3.org/TR/css-break-3/#break-margins doesn't say anything special about floats. It focuses on block-level boxes, i.e. not floats.

Floats are special, in that their margins do not collapse with anything. So should they collapse with (or be truncated by) (or do something else (slice?) at) fragmentainer boundaries? In a way, one can say that a float's margins are treated just like border or padding, since sibling content will not overlap with the margins, unless forced. The boundary for regular boxes is the border-box, whereas for floats, it's the margin-box.

There are interoperability issues here. Gecko makes a float's block margins unbreakable if break-inside:avoid is specified, but not otherwise. Blink attempts to treat such margins as completely unbreakable (except that there are bugs with the block-end margin; see https://bugs.chromium.org/p/chromium/issues/detail?id=1458768 , but that's not very relevant here).

Example:

<div style="overflow:auto; columns:2; column-fill:auto; height:100px;">
  <div style="height:80px;"></div>
  <div style="float:left; width:100%; margin-top:50px; height:10px;"></div>
</div>

What should happen to the margin?

A. Should it be truncated, like a regular blockl?
B. Should it overflow the first column and cause the multicol container to be scrollable?
C. Should it be sliced, so that 20px ends up in the first column, and 30px in the second?
D. Should it it be pushed to the second column, just before the border-box of the float?
E. <Something even more creative>

Gecko does B, Blink does D.

@fantasai fantasai added the css-break-3 Current Work label Jan 9, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
css-break-3 Current Work
Projects
None yet
Development

No branches or pull requests

2 participants