How do I change the shape of a :hover in the navbar?

Question

I have added a transparent hover on my navbar social icons but i cannot figure out how to change the shape of the hover. It currently looks like this:

I'd like the hover to only appear on the icon itself, rather than the space above and below it.

<li id="menu-item-518" class="fb-icon menu-item menu-item-type-custom menu-item-object-custom menu-item-518"><a title="Facebook" href="https://www.facebook.com/linkhere">Facebook</a></li>

The CSS of my child theme is currently:

/* Social link hover colour */
.fb-icon.menu-item.menu-item-type-custom.menu-item-object-custom.menu-item-518 a:hover{
	background-color:transparent;
}

Thank you

Answer 1

尝试删除padding-top和padding-bottom，并在需要时将它们替换为margin-top和margin-bottom。

所以也许是这样的：

.my-icon {
  padding-top: 0;
  padding-bottom: 0;
}