Sanding UI | CSS-Tricks
[ad_1]
Jim has stalled while working on a form. Of course, with Flexbox it’s trivial to place labels next to inputs, but in Jim’s case there was a bit of dead clicking going on between the labels and radio buttons.
The problem? Not the markup, that’s all semantic and cool. It turns out that the gap The element placed between the elements is not interactive. When you think about it, it makes sense, but it’s still frustrating because it looks and feels like a bug even though everything is fine with the styles.
The solution is quite simple: padding along the inside edge of the input expands the dimensions of the box, leaving the extra space interactive with visual spacing. Margin would not work, as it is similar to gap by pushing the element’s box instead of expanding it.
I am linking to Jim’s article because it is a perfect demonstration of CSS’s ability to in many ways the sameIt is easy to fall into the trap of “one size fits all” thinking, but CSS wants nothing to do with that. Instead, it asks you to adapt to open-minded strategies, perhaps even defensive.
Direct link →
[ad_2]
Source link