CSS - Pourquoi cette marge invisible est-elle appliquée à mon bouton css <a>?

Question

J'avais des problèmes avec deux types de boutons. Il s'agissait essentiellement d'un bouton de formulaire et d'un bouton css. Et j'ai été informé que le bouton css utiliserait display: inline-block; Cela a fait l'ensemble d'une étiquette href ressemble en fait à un bouton. Mais cette marge invisible semble bousiller quelque chose. J'ai essayé de les séparer en classes css séparées, mais bizarrement, l'application d'une marge réelle sur le bouton css donne également une marge supplémentaire. Qu'est-ce qui cause ça?

Vous pouvez facilement le voir ici (graphiques bas): www.matkalenderen.no

Fondamentalement, le code ressemble à ceci:

 <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

Je viens de trouver le réponds moi :)

On dirait que j'ai été capable de le réparer par appl ying une hauteur de ligne d'environ 31 pixels.