[Résolu]Margin sur input

Bonjour , j'ai un probleme pour mettre une margin-top sur un input.
le margin-top agit sur les 3 input alors qu'il devrais agir seulement dans le 2eme je ne comprend plus rien ?

<div class="centre_connexion">
    <input class="bouton_connexion" type="text" name="pseudo" value="Pseudo" />
    <input class="bouton_envoyer_connexion" type="submit" name="envoyer" value="" /><br />
   <input class="bouton_connexion" type="password" name="password" value="password" />
</div>

.bouton_connexion{
margin-left:15px;
width:85px;
height:15px;
font-family:verdana;
font-size:11px;
border:1px solid #bcbcbc;
color:#868688;
}

.bouton_envoyer_connexion{
margin-top:10px;
border:none;
background: url('../image/connexion/connexion.jpg');
width:77px;
height:23px;
cursor:pointer;
}

Modifié par tiesto95 (21 Mar 2009 - 02:26)

Salut,

ce comportement est normal puisque les éléments INPUT ont un rendu de type 'en-ligne' ce qui signifie entre autres qu'ils ont pour valeur par défaut de la propriété vertical-align : baseline.
Si j'ai bien compris ce que tu souhaites obtenir tu pourrais essayer :

.bouton_envoyer_connexion {
	...
	vertical-align: top;
}

En passant :

* à quoi sert le DIV ? L'élément FORM n'est-il pas suffisant dans ton cas ?

* associer des LABEL aux éléments INPUT facilite l'accès à la saisie des champs (pour tout le monde et plus encore pour les utilisateurs de lecteurs d'écrans).

* en cas d'images désactivées ton INPUT de type submit n'est pas accessible : le remplacer par un INPUT de type image avec le alt qui va bien.

* le fait de placer cet INPUT au milieu des champs de saisie, bien qu'original ( ) n'est pas du tout ergonomique (et c'est pire pour les utilisateurs de lecteurs d'écrans).


En résumé cela donnerait :

<form action="lien.php" method="post" class="centre_connexion">
	<label for="pseudo">Pseudo : </label>
	<input class="bouton_connexion" type="text" id="pseudo" name="pseudo" value="Pseudo" />
	<label for="password">Mot de passe : </label>
	<input class="bouton_connexion" type="password" id="password" name="password" value="password" />
	<input class="bouton_envoyer_connexion" type="image" src="../image/connexion/connexion.jpg" alt="Soumettre" name="envoyer" />
</form>

Pour plus d'infos voir :
Le modèle des boîtes.
Comprendre la structure HTML et le rendu CSS des balises : bloc et en-ligne.