Question

I have the following HTML code within a table:

<td id="decllink"><a href="#">Decline</a></td>

And in the CSS file:

#decllink {white-space:nowrap;padding:2px 2px 2px 2px;float:right}
#decllink a {color:red;font-weight:bold;text-decoration:none;background-color:inherit}
#decllink a:hover {color:white;text-decoration:none;background-color:red}

When I hover with the mouse over the link in the table cell, I want to highlight its text by switching forground and background color. So originaly the text color of the link is red with a white background. When I hover the link it should get a red background and a white text color. That works fine with this HTML/CSS code.

However, when hovering the link its red background color becomes exactly as wide and high as the text. With the padding I wanted to create a red “border” around the text, so that when hovering the link it should more look like a button.

How to achieve that?

Answer 1

Just make

#decllink { margin:0px; padding: 0px; }
#decllink a { padding: 5px } // for example