CSS样式<a>标签背景、<div>标签、伪类选择器的问题

Question

怎么实现如下的效果：
当鼠标放在登录按钮上时，整个登录按钮全部变红？
我的代码只能完成如下效果：
a标签和黑色的div标签始终有个间距，在a标签中定义margin 0px也不管用。
但是取消div中设置的行间距 line-height: 40px; 就可以实现了，但是这样整个黑色div又太矮了，求助如何实现第一张图的效果。

<!--    HTML顶部登录标签-->
    <div class="top">
        <a href="#">登录</a>&nbsp;&nbsp;&nbsp;
        <a href="#">注册</a>&nbsp;&nbsp;&nbsp;
        <a href="#">更多</a>&nbsp;&nbsp;
    </div>

<!-- CSS代码  -->
.top{
    background: black;
    text-align: right;
    vertical-align: 50%;
    line-height: 40px;
    font-size: 20px;
}

.top a{
    color: white;
    border: 1px solid;
    text-decoration: none;  /*去除下划线*/
    color: black;
}

a:hover{
    background-color: red;
}

Answer 1

a{
    display: inline-block;
    width: 80px;
    height: 40px;
}

Answer 2

楼上的回答是对的，补充下原因
display为inline的元素，width、height、margin-top、margin-bottom、padding-top、padding-bottom不生效
演示demo:
https://codepen.io/cuteyangya...

Answer 3

解决了，使用display属性就行，代码如下：

.top{
    background: black;
    text-align: right;
    vertical-align: 50%;
    line-height: 40px;
    font-size: 20px;
}

.top a{
    color: white;
    border: 1px solid;
    display: inline-block;
    width: 80px;
    height: 40px;
}

a{
    text-decoration: none;  /*去除下划线*/
    color: black;
    text-align: center;
}

a:hover{
    background-color: red;
}

下面是属性介绍：
display属性，用来设置一个元素应如何显示。可以设置块级和行内元素的切换，也可以设置元素隐藏。
元素显示
/ 把列表项显示为内联元素，无长宽/
li {display:inline;}
/ 把span元素作为块元素，有换行/
span {display:block;}
/ 行内块元素，结合的行内和块级的优点，既可以行内显示，又可以设置长宽，/
li {display:inline-block;}