Jim hit a snag while working on a form. Placing labels next to inputs is trivial with flexbox, sure, but what happened in Jim’s case was a bit of dead-clicking between the labels and radio buttons.
The issue? Not the markup, that’s all semantic and cool. Turns out the gap
he placed between the elements is non-interactive. Makes sense when you think about it, but frustrating nonetheless because it looks like a bug and feels like a bug even though there’s nothing wrong with the styles.
The solution’s easy enough: padding along the inside edge of the input extends its box dimensions, allowing the added space to remain interactive with visual spacing. Margin wouldn’t work since it’s akin to gap
in that it pushes the element’s box instead of expanding it.
I’m linking up Jim’s article because it’s a perfect demonstration that CSS is capable of accomplishing the same thing in many ways. It’s easy to fall into the trap of “single-solution” thinking, but CSS doesn’t want anything to do with that. It’ll instead challenge you to adapt toward open-minded strategies, perhaps even defensive ones.
Sanding UI originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.
Having fun with Bramus’ new Caniuse CLI tool. This’ll save lots of trips to the…
Two possible syntaxes for CSS masonry, one draft specification, and you get to share your…
Getting right to it: the CSS-Tricks Almanac got a big refresh this week! I’m guessing…
I’m working on a refresh of my personal website, what I’m calling the HD remaster.…
Only Chris, right? You’ll want to view this in a Chromium browser: CodePen Embed Fallback…
I’m a big Lynn Fisher fan. You probably are, too, if you’re reading this. Or…