[Résolu] Inline-block: espacement vertical des blocs

Bonsoir

J'ai fait un menu horizontal de la façon suivante:

<nav style="width:90%;margin: 0 auto;text-align:center;">
        <a href="...">
          <p>Accueil</p>
        </a>
        <a href="...">
          <p>Premier item</p>
        </a>
        <a href="...">
          <p>Deuxième item</p>
        </a>
        <a href="...">
          <p>Troisième item</p>
        </a>
        <a href="...">
          <p>Quatrième et dernier item</p>
        </a>
      </nav>

et le CSS correspondant:

nav p{
    display:inline-block;
    color:rgb(102, 51, 102);
    padding:0 0.5em;
    font-family:Arial;
    margin:0 auto;
}

Lorsque je réduis la largeur de la fenêtre, j'observe que les entrées se mettent sur plusieurs lignes et restent centrées, ce qui est conforme à ce que je veux, par je ne m'attendais pas à ce que les lignes soient si distantes les unes des autres (en gros l'équivalent d'une ligne), puisque margin et padding verticaux sont à 0.J'ai expérimenté en mettant des margin négatives, mais ça ne change rien.
J'ai également essayé

line-height:75%;

sans plus d'effet.

Une idée sur la façon de réduire cet espacement?
Modifié par PapyJP (20 Feb 2015 - 23:56)

C'est un comportement inhérent à l'affichage inline-block de vos éléments <p>, car c'est comme s'ils étaient sur une ligne d'écriture, il y a donc une hauteur de ligne par défaut qui crée cet espacement entre vos éléments. L'élément qui créé un contexte de ligne est le parent des éléments en inline-block, c'est à dire <nav>

nav {
   line-height: 75%;
}

devrait mieux fonctionner
Modifié par Freez (21 Feb 2015 - 02:07)