06 Expanded Hit Area. 6 of 95.
06/TARGET ACQUISITION/6 of 95
Expanded Hit Area
What you see does not have to be all you can hit.
Best experienced with a pointer.
The problem
Small controls demand pixel-perfect aim, and near-misses do nothing so the button feels broken.
The solution
Use a larger invisible interactive area around each control.
Experiment
Play with the values
16px
How it works
- The painted control stays visually small so the layout does not grow.
- The hit-test bounds extend past the visible edges by a padding the user never sees.
- Pointer events are tested against that padded region, not only the painted pixels.
- A hit anywhere in the padding activates the control, which matters most for icons and dense toolbars.
Seen in
Icon buttons
Invisible padding around small glyphs catches near-misses without changing the visual size.
Close buttons
Dismiss controls in corners get a larger tap area so you don't hunt for the exact pixel.
Checkbox rows
The whole row is clickable even though only the box looks interactive.
Mobile tap targets
Touch interfaces expand hit bounds to meet minimum size guidelines without bloating the layout.
Resize handles
Eight-pixel handles get invisible padding so corner and edge grabs are easier to hit.