CSS. Why is this invisible field being applied to my <a> tag css?

I had problems with two types of buttons. It was a form button and a css button basically. And I was informed that the css button is using display: inline-block; This made the entire href tag actually look like a button. But this invisible edge seems to bring something. I tried to split them into separate css classes, but strangely by applying real stock to the css button you get extra headroom. What is causing this?

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

Basically, the 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_css_blue {
    margin-top:20px;
}