What this problem class covers #
Spacing issues is the failure class Loupely Lens identifies when an element has unexpected gaps, insufficient gaps, unwanted space around it, or elements that are too close together, and the cause is a CSS margin, padding, or gap rule from an unexpected source. You set padding in your Page Builder. The spacing looks completely different. You remove the margin. The space is still there. A rule from somewhere else is controlling the actual spacing.
Why spacing is harder to debug than color #
Color conflicts are usually visible as the wrong color. Spacing conflicts can be invisible: extra space that looks like part of the layout, gaps that you didn’t add, margins collapsing in ways that produce unexpected results. Browser DevTools shows spacing as the Box Model diagram, which shows the computed values. But it doesn’t tell you which rule produced that value or why your Page Builder setting isn’t being applied.
The specific complexity with spacing: CSS Margin Collapsing. When two block elements with vertical margins are adjacent, the browser doesn’t add the margins together. It collapses them to the larger of the two values. This means setting a bottom margin of 40px on one element and a top margin of 40px on the next doesn’t produce 80px of space between them. It produces 40px. This counterintuitive behavior produces spacing results that look like bugs but are actually how CSS is supposed to work.
How Lens diagnoses spacing issues #
Lens captures every margin, padding, and gap rule applying to the element you clicked, along with the rules applying to adjacent elements that could be collapsing with it. The origin classification shows whether the spacing rule is coming from your theme’s reset stylesheet, your Page Builder’s default styles, a plugin’s stylesheet, or an explicit rule you (or someone) set.
The diagnosis identifies the specific discrepancy: “The spacing above this section is being set by a top margin in your theme’s base stylesheet. Your Page Builder’s padding setting applies inside the section, not above it. The gap you’re seeing is coming from the theme margin, not from anything in your Page Builder settings.”
What the triage step provides #
Spacing overrides are among the safest CSS overrides to generate, because targeting an element’s margin or padding is specific and unlikely to affect other elements. Lens generates the override when the source rule is identifiable and the fix is clear. When margin collapse is the cause, the triage step explains the mechanism in direct terms and suggests the specific approach to resolve it (adding overflow hidden to the container, using padding instead of margin, or removing the collapsing margins from the adjacent elements). When the spacing comes from a Page Builder default style that’s hard to override without affecting other elements of the same type, Lens routes to developer handoff with the full cascade context.