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

Question

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

Answer 1

Try resetting your margins;

.button_red, .button_blue, .button_css_red, .button_css_blue 
{
margin: 0;
}

And you have display:block; in there twice. Also make sure that the button width/height isn't wider than that image itself, I had that problem yesterday :).

And also try a negative margin on;

.button_css_red {
    margin-top:-10px;
}​

I use that sometimes with things like this.

After looking at it with Firebug, I would suggest you could wrap the two elements in two relatively positioned divs and move them to where you desire. I've used this technique on the site I've been working on and it works great :)

Answer 2

Just found the answer myself :)

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