Re: a elements, line-height, and border-bottom issues

[Senff]

To control the distance between the text and the bottom border, you’ll have to give the A element a height indeed, but it will only have effect when the element is block-level. In this case, its an inline element so the height won’t be applied. Change the A to a block level element (and give it a height of 20 or so) and you’ll see how it would work.

However — making it a block element will make it a lot more difficult to center it within its wrapping LI, and you’ll be back to your initial problem; the underline will take up the entire space of the wrapping LI. The solution to that would be to give the A a specific width and then center it with margin: 0 auto;.

All in all, every time you want to solve a problem, a new problem shows up, in a way.