Espace indésirable sous un block

Bonjour,

J'ai fait une zone en CSS de 30px de hauteur. A l'intérieur de celle-ci, j'aimerais insérer un menu horizontal constitué de plusieurs liens en "block" de 30px de hauteur.

A l'affichage, les blocs de liens apparaissaient avec un espace indésirable, comme ceci :
http://uppix.net/f/1/3/bd95d70513c6b4247b4daaf47cff1.jpg

En jouant avec "line-height", j'arrive à obtenir le résultat que je souhaite, à savoir ceci :
http://uppix.net/b/9/d/ec5c482ad204b5762caf90f54d863.jpg

Mon code est le suivant :

#menu {
width: auto;
height: 30px;
padding-top: 0px;
}

#menu a:link, #menu a:visited {
line-height: 24px;
display: inline-block;
width: auto;
height: 30px;
font-size: 0.8em;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
background: #999999;
}

<div id="menu">
	<a href="">lien 1</a>
	<a href="">lien 2</a>
	<a href="">lien 3</a>
</div>

C'est du bidouillage. Existe-t-il une façon plus propre de caler mes blocs ?

Est-ce que ça a à avoir avec le problèmes des espaces indésirables sous "inline-block" ? Je n'ai pas réussi à appliquer les conseils du tuto.

Merci pour votre aide !

Bonjour,
l'espace blanc est un white-space (il y a une explication sur alsacréations)

il peut être supprimé en supprimant l'indentation du code comme cela:

<div id="menu">
	   <a href="">lien 1</a><a href="">lien 2</a><a href="">lien 3</a>
</div>

ou en plaçant des balises de commentaires comme cela

<div id="menu">
	   <a href="">lien 1</a><!--
	--><a href="">lien 2</a><!--
	--><a href="">lien 3</a>
</div>

Bonsoir,

Pour l'article qui en parle sur AlsaS : http://www.alsacreations.com/astuce/lire/1432-display-inline-block-espaces-indesirables.html

Salut,

En ce qui concerne le petit décalage vertical, il s'agit bien de ta hauteur de ligne (la partie sous la ligne de base).
Tu peux y remédier également en alignant tes liens verticalement : vertical-align: top;

tm

Merci beaucoup pour vos réponses.


rodolpheb oui mais cela supprime l'espacement horizontal entre les blocs, or moi c'est l'espacement au-dessus de ceux-ci qui me gêne

Super_baloo8 j'avais lu ce tuto mais je n'avais pas réussi à l'appliquer à mon cas.

tm™ ah oui, super, merci beaucoup, nickel !