为什么我的锚点与我的提交按钮有不同的风格？

Question

我创建了一个提交按钮和具有相同类名的锚链接，具有相同的样式。但结果却不同。我的锚点链接比我的提交按钮大。喜欢这个

以下是摘录

.btn {
    display: inline-block;
    background: red;
    margin:10px;
    padding: 13px 30px;
    border:none;
    border-radius: 4px !important;
    box-shadow: 0 4px 0 0 blue;
    
    color: #fff;
    font-size: 18px;
    text-transform: uppercase;
}

<input type="submit" value="Login" class="btn">
<a href="" class="btn">Login</a>

如何使它具有相同的尺寸？没有将高度设置为精确的px或设置元素的行高。提前致谢

jsfiddle或sippet上的

具有相同的样式，但是当我在本地浏览器上创建并运行它时会说不同的东西

Answer 1

在line-height课程中设置.btn会让他们同样高大。

.btn {
    line-height: 1em;
    display: inline-block;
    background: red;
    margin:10px;
    padding: 13px 30px;
    border:none;
    border-radius: 4px !important;
    box-shadow: 0 4px 0 0 blue;
    
    color: #fff;
    font-size: 18px;
    text-transform: uppercase;
}

<input type="submit" value="Login" class="btn">
<a href="" class="btn">Login</a>