Inspect the working example
Each paragraph reserves at least 24px. The hidden paragraph retains its box; the removed paragraph has display:none. At the base text size, After begins 48px below Before.
| Case | Input or inspection | Result and meaning |
|---|---|---|
| Hidden paragraph | Inspect bounds and visibility | Box retained;24px at base size |
| Removed paragraph | Inspect display and bounds | display:none; measured height 0 |
| Underlying text | Inspect DOM text | Both strings still exist in the source tree |
Follow the browser mechanism
Visibility controls rendering while preserving the box in this fixture. display:none suppresses box generation. Neither setting deletes the DOM string. Enlarged text can increase minimum-height boxes, so the 48px base result must not be reused after text growth.
Opacity is not the same as removing a box
The alternative makes a paragraph transparent instead of removing its box.
<style>body{margin:8px}</style>
<style>p{margin:0;min-height:24px}.transparent{opacity:0}</style><p>Before</p><p class="transparent">Transparent note</p><p id="after">After</p>The transparent paragraph still has a layout box and remains a hit-test target at its measured center in this fixture. It is not equivalent to display:none.
Try the repair
Can zero opacity by itself prove that content has been removed from layout and interaction?
Show the worked answer
No. Inspect actual box generation and interaction. Opacity alone changes paint transparency, not those properties.
- Measure each box and the final paragraph position.
- Keep DOM presence separate from painted visibility.