Construire un menu en CSS
CHAPITRE 12
163
La propriété text-decoration étant héritée par défaut, et sa valeur précédente nous
agréant, il n’est pas nécessaire de la préciser de nouveau. Ce menu acquiert peu à peu
une allure convaincante.
Ses liens sont toutefois un peu trop rapprochés ; il siérait de les espacer un peu. La
propriété margin semble naturelle pour cela, et intuitivement on est tenté d’appliquer
à chaque élément une valeur de margin-bottom :
Ceci n’a pourtant aucun effet, quelle que soit la valeur de marge indiquée. Saurezvous deviner pourquoi ? L’élément en ligne n’est pas l’une des rares exceptions
(telles que la balise ) pouvant recevoir des dimensions ou des marges verticalement (en haut ou en bas de leur zone à l’écran). La propriété margin-bottom ne s’y
applique donc pas.
Pour aérer les différents liens du menu, deux techniques sont possibles. La première
(appliquer une marge au parent de l’élément , soit

, qui est de type bloc) sera
évoquée plus loin, lors de l’élaboration d’un menu sous forme de boutons. Penchonsnous dans l’immédiat sur la seconde : il s’agit simplement d’augmenter la hauteur de
la boîte de texte de l’élément par la propriété line-height. La figure 12-3 présente le résultat final ainsi obtenu.
list-style-type: none;
}
#menu a {
color: green;
text-decoration: none;
}
#menu a:hover, #menu a:focus {
color: orange;
}
#menu a {
color: green;
text-decoration: none;
margin-bottom: 5px; /* instruction sans effet ! */
}
#menu a {
color: green;
text-decoration: none;
line-height: 25px;
}