css - CSS：按钮文本位于看似大于定义的行高的底部

Question

我遇到了一个问题，即应用于元素的类样式呈现不同的方式取决于它是应用于锚标记还是按钮。

我的班级“btn”定义如下；

.btn {
    background:transparent;
    border:2px solid #FFF;
    padding: 18px 30px 18px;
    line-height:1.7em;
    max-width:100%;
    white-space:normal;
    margin-top:25px;
    border-radius:100px;
    text-transform: uppercase;
    letter-spacing:0.1em;
    font-weight:bold;
    color:#FFF;
    text-decoration:none;
    transition:all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
   }

当应用于锚标记时，它按预期呈现；

但是当应用于按钮时，它会给按钮一个看似更大的行高，文本位于底部；

我尝试在 css 文件的开头重置按钮的行高，但这没有帮助。

有谁知道这里发生了什么？如何使按钮和锚标记以相同的方式呈现？

标签： css

Answer 1

body{background:#666;}

.btn {
    background:transparent;
    border:2px solid #FFF;
    padding: 18px 30px 18px;
    line-height:1.7em;
    max-width:100%;
    white-space:normal;
    margin-top:25px;
    border-radius:100px;
    text-transform: uppercase;
    letter-spacing:0.1em;
    font-weight:bold;
    color:#FFF;
    text-decoration:none;
    transition:all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
   }

<a class="btn">Download brochure</a>

<button type="button" class="btn">Download brochure</button>

似乎自己几乎可以正常工作 - 只有几个像素？