Re: [csswg-drafts] block-step-size doesn't actually work (#11514)

I think there's some confusion here. Let's take this example:

```
<body style="block-step-size: 30px">
 <div id=one style="margin-top: 20px">
  <div id=two style="margin-top: 40px">
   <div id=three style="height: 10px;"></div>
  </div>
 </div>
```

This asks for the body element to have a margin box that's a multiple of 30px.

Due to collapsing margins, we have a body content box that is 10px tall, with zero margins. The spec says “In situations where margins collapse, only the box’s own margin is considered in calculating its outer size”, thus we need to add 10px above and below the body. The added 10px top margin collapses with the existing 40px collapsed margin, and in layout terms we have a 40px margin, a 10px box (all three nested together), followed by a 10px margin. The inner boxes are not affected.

The guarantee in the spec is only that the outer height will be a multiple of the block step. Thus, when margins collapse, you will only get the desired result if that outer element has the largest margin. For example, if body had the 40px margin instead, we'd add 5px above and below to get an outer size of 60px (2x30px).

The rule in the spec is very naive, and it was chosen to simplify the calculation, relying on the fact that in many cases, the outermost element carries the largest margin. We might want to revisit that decision and add more intelligent handling for collapsed margins.

The goal of block-step-sizing is different from the goal of line grids, though. Line grids force everything onto the grid, whereas block-step-sizing allows content that has rhythm to have interruptions that restart the rhythm as well as interruptions that don't.

-- 
GitHub Notification of comment by fantasai
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11514#issuecomment-2617822748 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 28 January 2025 04:32:38 UTC