Bonjour à tous !

Je viens ici pour vous parler d'un petit problème que je viens de rencontrer sur la création d'une petite page internet.

Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
	<!-- un formulaire banale -->
<form  method="post" action="envoyer" >
 
		<!-- Un label pour aller avec le ComboBox ci-dessous -->
	<label for="ComboBox1">Type de la cible :</label>
		<!-- Le fameux ComboBox -->
	<select  name="ComboBox1">
		<option>Un choix</option>
		<option>Un autre choix</option>
		<option>Encore un autre choix</option>	
	</select>
 
		<!-- Un label pour aller avec le second ComboBox ci-dessous -->
	<label for="ComboBox2">Type de la cible :</label>
		<!-- Encore un ComboBox -->
	<select  name="ComboBox2">
		<option>Encore et toujours du choix</option>
		<option>En-choix</option>
		<option>Plus d'inspiration pour ce dernier choix</option>	
	</select>
</form>

Je doit mettre des formulaires et les labels qui y sont associés, et le tout doit être joliment aligné.

Je me suis dit, que dises les confrères web-master sur internet pour aligner ces formulaires. Et là, tous on répondu :

Code css : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
label {
    display: block;
    float: left;
    width: 150px;
}

Et ça marche nickel chrome ! (pas le navigateur, hein !)
Sauf que on me dit que tout ça à l'air collé...Normal, puisque aucuns espacement n'est mis entre les lignes. Du coup, le bas de la première combobox se confond avec le haut de la seconde qui est juste en dessous.

Je décide donc d'ajouter :
Code css : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
form {
    line-height : 2em;
}

Et là, c'est le drame.... Les Combobox sont décalés d'une marge invisible sur la gauche.
En jouant un peu, je découvre que si je retire le Display, ou le line-height, il n'y a plus ce problème. Mais les lignes sont collées, ou les formulaires ne sont pas alignées....

Code résultat : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
Type de la cible : |Ici la première ComboBox |
----Type de la cible : |Ici la seconde ComboBoc  |
J'ai symbolisé l'espace involontaire (qui me gène )avec les ----

Sauriez-vous m'expliquer ce phénomène ? Ou trouver une solution qui me permettrai d'aligner les formulaire et d'écarter mes lignes ?

Il y aurai bien le contournement de rajouter des <br> entre chaque lignes, mais étant encore en apprentissage du CSS, je cherche vraiment à m'améliorer dans son maniement.

Merci d'avance pour toute aide ou conseils, et bonne continuation !