Making a:hover with padding. It moves, how can I prevent it?

My link: <a href="#">Home page</a>

Css:

a:hover
{
   开发者_开发知识库 padding: 5px;
    background: black;
}

When I hover over home page link, it moves, because I use padding. How can I avoid it? I want that black background would appear where the link is without moving its link and other links. Thanks.

---

You can add it by default:

a { padding: 5px; }

Or you can use margins:

a { margin: 5px; }
a:hover { margin: 0px; padding: 5px; }

This should work:

a {
    padding: 5px;
}
a:hover {
    background: black;
}

---

Add the same padding to the base class (a with no hover).

---

remove the padding on hover, if you want padding use which will be there all the times.

a{
    padding: 5px;
}

Did I answer your question?