Marge gauche négative et mystérieuse différence de 4px

Question

Je me gratte la tête depuis un bon moment et j'ai finalement décidé de demander de l'aide. En fait, j'ai un formulaire simple avec deux entrées (champ + bouton) et je veux amener le bouton au-dessus du champ tout en enveloppant le formulaire à la largeur correcte du champ de texte + padding.

J'utilise margin-left : -31px sur un bouton dont la largeur est fixée à 27px.

Vous pouvez l'essayer sur http://jsfiddle.net/UfK6K/ et il apparaît

MAIS lorsque je définis margin-left : -32px, la mise en page est rompue. http://jsfiddle.net/UfK6K/1/ et apparaît

Maintenant, si je change la largeur du bouton à n'importe quel chiffre et tant que je garde la marge gauche dans la différence négative de 4px, cela fonctionne, mais quand elle augmente comme dans le cas de -32px, cela casse.

Je veux comprendre d'où vient la différence de 4px ? Et bien sûr, comment puis-je déplacer le bouton un peu plus à gauche du champ de texte ?

*Il se casse dans tous les navigateurs sauf Opera.

Answer 1

C'est une question très délicate : d'où viennent les 4px ? Je vais essayer d'y répondre.

Lorsque l'affichage d'un élément est réglé sur inline-block, 4px sont placés à droite de cet élément. En fait, c'est la taille que prend un "espace blanc", oui, c'est bien un espace blanc.

On peut considérer que les éléments inline-block sont séparés par un espace blanc et qu'il prend généralement 4px car dans Opera, il prend un peu plus (je ne suis pas sûr de la dernière version cependant - parce que différentes polices rendent l'espace blanc avec différentes largeurs dans différents navigateurs, la seule police qui rend une largeur d'espace blanc cohérente à travers les navigateurs et les tailles de police est Courier New. c'est une police à largeur fixe, et son espace blanc est de 0,63em de large). Mais vous avez compris ?

Il existe maintenant plusieurs solutions de contournement, comme float:left ou même la définition d'un espacement négatif de 4px entre les lettres de l'élément parent qui contient des éléments bloqués en ligne.

Vous pouvez également essayer font-size : 0 ;

Et dans votre cas particulier, position:absolute ; semble être la meilleure option.

Answer 2

Vous pourriez ajouter position: absolute; au CSS du bouton.

.sbutton {
    position: absolute;
    margin-left: -30px;
    margin-top: 1px;
    /* ... */
}

Fiddle : jsfiddle.net/UfK6K/4

Je ne sais pas pourquoi il est cassé (FF9 ici). Le positionnement CSS peut parfois causer beaucoup de problèmes.

Answer 3

Les 4px proviennent du rendu de l'espace blanc entre les deux champs de saisie. Le bouton passe à la ligne suivante parce que vous ne laissez pas suffisamment d'espace pour que l'espace blanc soit rendu sur la première ligne après la première zone de saisie.

L'espace blanc se prolonge jusqu'à la ligne suivante et le bouton est alors rendu après celle-ci, décalé par le paramètre margin-left.

Comme vous l'avez déjà découvert, la suppression de l'espace blanc entre les champs de saisie résout le problème. L'alternative en CSS aurait été d'ajouter white-space: nowrap; à la form le style.

Answer 4

Une autre façon de procéder est d'ajouter

.sbutton {
    margin-right: 5px;
    margin-left: -32px;
}

et pour une raison quelconque, ça le répare. Ensuite, pour chaque pixel en moins dans la marge gauche, augmentez la marge droite.

Les marges négatives m'ont toujours dérouté...