CODEWITHSUNDEEP
htmlcss
good_evening
good_evening

Reputation: 21729

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.

Upvotes: 4

Views: 11854

Answers (3)

Tanner Ottinger
Tanner Ottinger

Reputation: 3060

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;
}

Upvotes: 4

Alex Feinman
Alex Feinman

Reputation: 5563

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

Upvotes: 2

Teja Kantamneni
Teja Kantamneni

Reputation: 17472

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?

Upvotes: 1

Related Questions