Adjust distance within links and underlines

how to control whitespace within link?

[CNibbana]

How can I add or adjust the amount of whitespace between a link and the default line that appears beneath it?

In other words, the text within a link and the horizontal space that is between it and the underline appears to be 1px; how can I adjust it to more than 1px?

For reference, anyone with a customized my_yahoo news page can see what I am talking about where the news links appear to have a 2px seperator between the links and the underlines.

I have tried line-height, padding, margin, etc. but they all adjust the outer perimeter and not the distnce between the wording and underline.

[createErrorMsg]

You can add vertical-align to your list of properties that do not accomplish what you want.

I believe the distance between text and underline is a function of the font baseline. Consider this from the W3 specs for the text-decorationproperty:

In determining the position of and thickness of text decoration lines, user agents may consider the font sizes of and dominant baselines of descendants...

I do not believe there is a way to alter font baselines using CSS.

where the news links appear to have a 2px seperator between the links and the underlines.

Is there any chance that what you're seeing on the yahoo site isn't an underline, but an OVERline from the link below? I found one site (here [hixie.ch]) that demonstrates how different text-decorations used within the same line box appear. In the demo using the overline value, it makes the text above it appear to have a 2 or 3px gap between text and line.

[claus]

Use border-bottom in stead of underline - just add padding ;)

[CNibbana]

The website you sited, createErrorMsg, has an interesting sample of what I am trying to recreate. If you look under section '1.' with the blue text and green underline the distance between the text and line appears to be 1px.

Under section '2.' the first sample with green text, blue text, red text, etc. has a larger spacing between the text and underline (2px?).

I viewed the source and it looks like nothing more than standard CSS 'text-decoration: underline', which leads me to believe the distance is either a product of my browser (ie6) or the type of font used.

Does anyone else see the space difference with different browsers? Do different text fonts generate different spacing between underlines?

[createErrorMsg]

After reading your post I went back and viewed that page in IE and it looks radically different from the version Firefox shows. If you read the text on the page, you saw that he is demonstrating a part of the specs that implies that inline text with a text-decoration property will use the baseline of the first element all the way through, even if the font size, weight, variant, or style are changed. Viewing the test in FF shows that it does, but in IE(6) it does not. The baseline of the font, and therefor the underline, is all over the place, and, yes, in some places it looks significantly larger than in others.

This leads me to believe that this is all merely an issue of font baselines, which is altered as text is made bold, or larger, ect.

If you really want control over the gap, I'd use claus' solution. You could just as easily style border-bottom to vanish on rollover like you can text-decoration (or change color, or do nothing at all), and it will give you control over the distance to the line...

<p>This is your text with a <a href="#">link</a>.</p>

a {
text-decoration: none;
border-bottom: 1px solid #fff;
padding-bottom: 2px;
}
a:hover{
border-bottom:0;
}

Works like a charm. (Nice one, claus.)

[bedlam]

If you really want control over the gap, I'd use claus' solution. You could just as easily style border-bottom to vanish on rollover like you can text-decoration (or change color, or do nothing at all), and it will give you control over the distance to the line...

<p>This is your text with a <a href="#">link</a>.</p>

a {
text-decoration: none;
border-bottom: 1px solid #fff;
padding-bottom: 2px;
}
a:hover{
border-bottom:0;
}

Works like a charm. (Nice one, claus.)

This does work well, but I should point out a potential problem with it; if you have linked images, they get the underline too!

The only way I can think of to turn this behaviour off is to put every image inside another element, and adjust the stylesheet accordingly:

HTML:

<div class="imageWrap"> 
<a href="img/bigExample.gif" title="Click to enlarge this image"> 
<img src="img/example.gif" width="50" height="50" alt="example image"> 
</a> 
</div> 

CSS:

div.imageWrap a { 
 border-style:none; 
} 

The problem is that the link is what gets the underline so that, unless there is a way of specifying the borders of elements that have certain child elements, there is no way to turn it off except by creating a special context for un-underlined links.

-B

[createErrorMsg]

Good point, bedlam. I suppose you could create a class and apply it to any <a>nchors with images inside...

<a href="#" class="imageInside"><img src=:image.gif" /></a>

a.imageInside {
border-bottom: 0;
}

...as an alternate solution.

[bedlam]

Yep. I shouldn't have said 'no way,' that will obviously work too.

-B

[MWpro]

Instead of making extra classes, you can also do something like this.

a {
text-decoration: none;
border-bottom: 1px solid #fff;
padding-bottom: 2px;
}
a:hover{
border-bottom:0;
}
a img {
border-bottom:0;
}

[bedlam]

a img {
border-bottom:0;
}

Nope. That won't help at all - that's exactly what my post was about.

That rule keeps an image inside a link from having a bottom border. The problem we're talking about is when a link is styled to have a bottom-border, and then an image is placed inside a link. The problem is that, whatever you define for the image, the link still has that bottom-border - unless you try one of my or CEM's solutions.

-B