When you increase the line-height of an element, you start getting gaps between each line of text. Most of the time this is fine, since you don’t see the specific gap.
But it is problematic when you have a narrow column, with a link that runs over multiple lines. If you move your mouse over the link, there is a small gap between the lines, which makes the link hover effect flash on and off.
From a design/usability perspective, I feel this makes for a bad user experience (no one likes random flashing). Try it with this:
I can add some padding to links to prevent this happening in some cases, but it doesn’t work when text is larger; I need more padding. Anyone have ideas for solutions?
Try fixing your flashing problem by setting display:block for your
<a>element in that narrow column.