Touch target spacing

How to apply it

1. 1

   Leave at least 8px between adjacent touch targets; gap-2 in a flex or grid row does it.

2. 2

   Never let tappable controls share an edge, segmented controls and icon rows included.

3. 3

   Measure the gap between hit areas, not between the visible shapes, when the targets carry padding.

4. 4

   Test with a thumb on a real phone, not a mouse cursor in a resized window.

Why it works

An adult fingertip contacts roughly 8-10mm of glass, and the point the OS reports is the centroid of that whole patch, not the pixel the user aimed at. Controls sharing an edge therefore sit closer together than the input device can resolve, and the tap goes to whichever target the centroid happened to fall in. Material asks for at least 8dp between adjacent targets for exactly this reason, and WCAG 2.2's 2.5.8 lets spacing stand in for size on the same logic.

What breaks

A pair of edge-to-edge icon buttons, archive next to delete, means a thumb aimed at the seam fires whichever one caught the centroid, so the user destroys a message they meant to file.

Review questions

1. 1

   Is there at least 8px between the hit areas of adjacent buttons, not only between their visible edges?

2. 2

   Do any buttons in a row or toolbar touch edge-to-edge?

3. 3

   On a real touchscreen, can you tap one button without brushing its neighbour?