CSS 2px magic [RESOLU]

[lpf]

Bonsoir à tous, je me creuse la tête pour 2px.. J'explique, j'ai refait le thème classic enfant entièrement en CSS. Tous est ok, sauf dans le header-nav ou j'ai le bouton hover (fond noir) qui est de 46px de H alors qu'il est déclaré 48px. Du coup j'ai un espace de 2px entre le haut de mon bouton et le haut de la barre de navigation. Voici mon code :

/* =========================
   HEADER (header-nav / header-top)
========================= */

#header .header-nav {
    background: #efe6d8;
    height: 48px;
    padding-left: 40px;
    padding-right: 40px;
    border-bottom: #c6a85a 1px solid;
}

#header .header-nav a { 
    color: #232323; 
    height: 48px; 
    padding: .75rem; 
    text-align: center; 
    white-space: nowrap; 
}

/*Un fond noir au hover*/ 
#header .header-nav a:hover { 
    background: #000; 
    color: #c6a85a !important; 
    height: 48px; }

et voici ce qu'il raconte :

Une idée car là je sèche, même fait beugué ChatGpt ... Merci et bon code

Edited February 13 by lpf
Résolu (see edit history)

[Eolia]

une url où on peut voir le souci ? A priori d'autres règles intérfèrent.

[lpf]

Oui pas de problème : Ici

Edited February 13 by lpf
Ajout lien (see edit history)

[Eolia]

le height n'est pas pris en compte à cause de la propriété inline:

donc faites ceci:

et ceci:

 

[lpf]

Bonjour @Eolia et merci de ce retour. Cela à corrigé le bouton "contactez-nous" mais  à fait décalé vers le bas le bouton "Connexion". 

Voila mon code corrigé :

/* =========================
   HEADER (header-nav / header-top)
========================= */

#header .header-nav #_desktop_contact_link #contact-link {
    margin-top: .8rem;
}  

#header .header-nav {
    background: #efe6d8;
    height: 48px;
    padding-left: 40px;
    padding-right: 40px;
    border-bottom: #c6a85a 1px solid;
}

#header .header-nav a { 
    color: #232323; 
    padding: .8rem; 
    text-align: center; 
    white-space: nowrap; 
}

/*Un fond noir au hover*/ 
#header .header-nav a:hover { 
    background: #000; 
    color: #c6a85a !important; 
}

ce qui donne (pour le bouton Contactez-nous impeccable) :

 

[Eolia]

il faut lui appliquer le même margin-top:

Edited February 13 by Eolia (see edit history)

[lpf]

YESSS ! Merci @Eolia ça fonctionne nickel. Purée à force de modifier ce thème enfant je ne voyais plus claire et là... Ben là j'ai pas vu.. MERCIIII