(css) Problema padding raddoppiato

[abcd1000]

Ho questo problema sia con firefox che con ie6

Ho realizzato un bottone che al passaggio del mouse, cambia immagine
il testo del bottone non e' scritto come immagine, ma come testo html

ho messo un bordo nero visibile per far capire il problema

vorrei ottenere

e quando passo con il mouse


Invece ottengo

e quando passo con il mouse


Perchè mi mette lo spazio che ho evidenziato con le sbarre, non lo voglio?

Codice html che uso
<div class="mybutton">Invia ad un amico</div>

Questo è il file css che uso

/*css bottoni natalizi*/
.mybutton {
  background: url(../images/button.gif) no-repeat;
  display: block;
  font-size: 14px;
  height: 44px;
  padding-top:24px;/* regola la posizione del testo rispetto all'immagine*/
  text-decoration: none;
  text-align: center;
  width: 185px;
}

.mybutton a:hover {
  background: url(../images/button_hover.gif) no-repeat;
}

L'immagine button.gif e button_hover.gif sono larghe 185px ed alte 44px

Il problema è nella riga:
padding-top:24px;
che serve ad allineare correttamente il testo in verticale, ma come inserisco questo padding-top, in automatico i browser mi aggiungono un
padding-bottom:24px;

Come faccio ad evitare che mi inserisca il padding-bottom?

[copsteve]

Prova ad utilizzare la proprietà margin-top anzichè padding-top... :master:

[deswign]

leva il div, applica lo stile direttamente al tag <a>; leva anche il padding-top e usa line-height per posizionare il testo.