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.
@joshuanhibbert I considered throwing that in, but to be honest I've encountered so many problems with that myself, that I didn't feel comfortable suggesting it. ;)
Hi.
I am trying to decrease the amount of space between the underline and text in the navigation of this page.
Adjusting the line-height does nothing. As does setting a negative margin-bottom. As does declaring a height for the a element.
Does a fresh pair of eyes have a better perspecitve?
The code:
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.
Isn't that the truth?
Thanks again for a quick blast of insight.
@Senff Actually, you could have the best of both worlds by using
inline-block!@joshuanhibbert I considered throwing that in, but to be honest I've encountered so many problems with that myself, that I didn't feel comfortable suggesting it. ;)
@Senff Interesting, what problems have you encountered with inline-block? I haven't experienced anything surprising myself.