How to control overflow line spacing for text within nested <p><a>

Question

How can I minimize the spacing between the following overflow text of this button that is simply a

with a nested

DEMO

<style type="text/css">
  p.button:hover { cursor: pointer; }
  p.padding  { padding:0; margin:0;}
</style>
<div style="width: 370px">
<table class="inline_button" style="width: auto ">
    <tr>
        <td style="text-align: center;  min-height: 28px;background-color: #000000; line-height: 28px;font-size: 12px;font-family: Arial, Verdana, sans-serif;padding: 0;border: 2px solid #fe9d39;"><div id="whatever">
            <p class="button padding" style="text-decoration: none; color: #ffffff; font-weight: bold;"><a style="text-decoration: none; color: #ffffff; font-weight: bold; padding:0px 10px; display:block;" href="http:msn.comr}">when this is really long it eventually overruns but can figure out </a></p>
        </div></td>
    </tr>
</table>
</div>

Answer 1

Kindly set line-height property for <a> or <p> to normal or 1 or in px unit.

add this code

p.padding a{line-height:normal;}

OR

p.padding a{line-height:1;}

OR

p.padding a{line-height:12px;}

to your stylesheet.