CSS - Why is this invisible margin being applied to my <a> tag css-button?

I was having trouble with two types of buttons. It was a form button and a css button basically. And I was advised that the css button whould use display:inline-block; This made the whole a href tag actually look like a button. But this invisible margin seems to be screwing up something. I tried separating them into separate css classes, but oddly, applying a real margin to the css button gives an additional margin as well. What's causing this?

You can easily see it here (low graphics): www.matkalenderen.no

Basically, code looks like this:

      <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_c开发者_如何学运维ss_blue {
    margin-top:20px;
}

Just found the answer myself :)

Looks like I was able to fix it by applying a line-height of about 31 pixels.