Inspect the working example
The body margin is zero. The section has no border or padding, and its paragraph has a 24px top margin. flow-root establishes a block formatting context that keeps that margin inside this section.
| Case | Input or inspection | Result and meaning |
|---|---|---|
| Parent top | Measure .box top | 0px |
| Child top | Measure .box p top | 24px |
| Margin location | Inspect the colored section | The top margin stays within its background area |
Follow the browser mechanism
Adjoining vertical margins can collapse in ordinary block layout. A new block formatting context changes that boundary. flow-root does not remove the paragraph’s margin; it prevents this parent/first-child collapse. Horizontal margins do not follow this same collapse rule.
The ordinary block lets the margin collapse
Removing flow-root leaves the same no-border/no-padding block and the same paragraph margin.
<style>body{margin:8px}</style>
<style>body{margin:0}.box{background:#e3efe8}.box p{margin:24px 0 0}</style><section class="box"><p>First workshop note</p></section>Parent and child tops both occur at y=24 in this exact fragment; the margin is outside the parent background.
Try the repair
Does flow-root make the child margin zero?
Show the worked answer
No. The computed top margin remains 24px. It changes whether that margin collapses across the parent boundary.
- Measure both parent and child tops in a fresh document.
- Keep the no-border/no-padding assumption visible when comparing results.