html - CSS - 为什么这个不可见的边距被应用到我的 <a> 标签 css-button？

Question

我在使用两种类型的按钮时遇到了问题。 它基本上是一个表单按钮和一个 css 按钮。我被告知 css 按钮应该使用 display:inline-block; 这使得整个 href 标签实际上看起来像一个按钮。 但是这个看不见的边缘似乎在搞砸什么。我尝试将它们分成单独的 css 类，但奇怪的是，对 css 按钮应用实际边距也会提供额外的边距。这是什么原因造成的？

你可以很容易地在这里看到它(低图形): www.matkalenderen.no

基本上，代码如下所示:

      <input type="submit" value="Logg inn" class="button_blue" alt="ready to login"> 
      <a class="button_css_red" href="access.php">Glemt passord</a> 

CSS

.button_red, .button_blue, .button_css_red, .button_css_blue {
    background-image:url("../img/sprite_buttons.png");
    background-repeat:no-repeat;
    border: none;
    color:#FFFFFF;
    display:inline-block;
    display:inline-block;
    font-size:12px;
    height:27px;
    width:98px;
}

.button_css_red, .button_css_blue {
    margin-top:20px;
}

Answer 1

刚刚自己找到了答案:)

看起来我可以通过应用大约 31 像素的行高来修复它。