Dead Clicks Between Labels and Inputs: A CSS gap Gotcha
While building a form, developer Jim Nielsen ran into a frustrating interaction issue: clicking in the space between a label and its radio button did nothing, even though the layout looked correct. The cause wasn’t faulty markup, which remained perfectly semantic, but the gap property used to space elements apart. That space sits outside the element’s interactive box, making it feel broken even when no style is actually wrong.
The fix is straightforward: applying padding to the inside edge of the input expands its hit area while preserving the visual space. Margin would be a poor substitute, as it pushes the box outward rather than enlarging it, behaving just like gap in that regard.
Jim’s post serves as a solid reminder that CSS often supports multiple valid routes to the same visual result. It’s tempting to latch onto one go-to pattern, but the language rewards a flexible mindset, often pushing developers toward more defensive—and ultimately more resilient—approaches in their stylesheets.
