背景颜色与文本或链接的高度和宽度相同

Question

如何将背景颜色的高度降低到与链接几乎相同的高度，我尝试在CSS上使用高度，但它没有工作

CSS

.login {

  color: #4CAF50;
  background-color: #a0ce4e;

}

.login a {
  cursor: pointer;
  display: inline-block;
  background: #a0ce4e;
  border-radius: 1px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  padding: 10px 15px;
  color: #ffffff;
  text-decoration: none;
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
}
.login a:hover {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

HTML

<div class="login">
            <ul class="nav navbar-nav">
                <li class="active">
                    <a class="page-scroll" href="#">Login</a>

                </li>
            </ul>
        </div>

Answer 1

删除填充：

.login a {
  padding: 0px; /* or 1.. */
}

Answer 2

那些看起来像bootstrap类，所以我想你可能需要从navbar-nav中删除填充和/或边距。

您可以通过添加自己的类并使用它来添加覆盖样式来完成此操作。例如：

<强> CSS ：

.navbar-nav.navbar-nospace {
  margin: 0px;
  padding: 0px;
}

<强> HTML ：

<ul class="nav navbar-nav navbar-nospace">