Minimize distance between lines in a span that makes a line break with css

I have the following html

<td valign="top" id="oddnumberedcolumns"> 
     <div><a><span class="myspan">line 1 without linebreak</span></a></div> 
     <div><a><span class="myspan">line 2 without linebreak</span></a></div>   
</td> 
<td valign="top" id="oddnumberedcolumns"> 
     <div><a><span class="myspan">A very looooooong line 3&#039;which results in a line break due defined width of table column</span></a></div> 
</td>

CSS:

font-weight: normal;
color: #333 !important;
font-size: 11px;
line-height: 22px;
border-collapse: separate;
border-spacing: 2px;
font-family: Verdana, sans-serif;

My problem is that is distance between line 1 & 2 is the same as line 3 that is "line break" so it looks there is four links where is actually only 3 links. How do I minimize the distance between the开发者_如何转开发 letters in line 3 when it "breaks" and leave the distance between line 1 & 2 as is. I would prefer change it in css and leave the html as is. Hope you understand what i mean by "line break" - i am perhaps mistreating it a bit...

in this case you can set a bottom-margin on the div to give space between the first two links and lower your line-height on the td from 22px to something a little higher than the font-size

example: http://jsfiddle.net/qwane/

td {
    font-weight: normal;
    color: #333 !important;
    font-size: 11px;
    line-height:15px;
    padding:10px 0;
    border-collapse: separate;
    border-spacing: 2px;
    font-family: Verdana, sans-serif;
    width:300px;
}
div {margin-bottom:11px;}

Modify the line-height value. Beware that line-height only apply to block elements, so you should assign it to your <div>

Here is a small rewrite that should help you: http://jsfiddle.net/GhMar/1/

Also take note that you can't have two elements with the same id (you have two "oddnumberedcolumns".