Layout & spacing indicators

Uiprobe visualizes layout and spacing issues directly on the canvas using lightweight visual indicators.

These indicators show where a layout differs from the design, by how much, and in which direction an element should change. They are designed to be readable without requiring knowledge of CSS or implementation details.

Layout and spacing indicators are used specifically for issues related to spacing, size, and padding.

Spacing issues

Spacing issues occur when the distance between two elements differs from the design.

How spacing issues are shown

Spacing differences are visualized using:

• a distance line drawn between the relevant edges of two elements
• a distance label showing the numeric difference (for example −10 or +8)
• subtle reference outlines around the affected elements

The line indicates where the spacing is measured.
The label indicates how much the spacing differs from the design.

How to read spacing values

• −10 means the gap is 10 pixels too large
• +8 means the gap is 8 pixels too small

When the same spacing difference appears repeatedly across similar elements, such as navigation items, Uiprobe may group these visually to indicate a systemic spacing issue.

Size and padding issues

Size and padding issues occur when an element’s own dimensions differ from the design.

This includes:

• incorrect width or height
• incorrect padding
• incorrect internal spacing

How size and padding issues are shown

Size and padding differences are visualized using:

• an outline around the live element
• a design reference edge or reference box showing where the element should end
• a distance line connecting the live edge to the design reference
• a distance label showing the required adjustment

One-sided size differences

If only one edge differs from the design, the distance line and label are shown on that edge only.

This typically indicates that padding or size needs to be adjusted on one side.

Symmetric size differences

If both sides differ equally, a single centered distance label is shown together with a design reference box.

This indicates that the element needs to grow or shrink symmetrically.

How to read size values

• −10 means the edge needs to move inward by 10 pixels
• +20 means the element needs to grow by 20 pixels in total

Principles behind layout indicators

Layout and spacing indicators follow a small set of consistent principles:

• distance lines show relationships, not scale
• distance labels show the true numeric difference
• very small differences are rendered with a minimum visual size to remain readable
• color indicates direction, not correctness
• all measurements are based on geometry, not CSS properties

Once you understand how one layout indicator works, all other spacing and size indicators follow the same logic.

Related concepts

• Issues
• Markers
• Annotation cards
• The Probe Inspector