HTML|CSS: Espace entre les boutons d'entrée

Question

J'ai un problème dans lequel j'ai un espace entre ces deux boutons.

Le code est le suivant:

.PostBtn
{
   background: url(../Images/Buttons/PostButtonF.png) no-repeat;
   width: 50px;
   height: 28px;
   border: none;
   margin: 0;
   padding: 0;
}
#NeedBtn
{
   background-position: 0 0;
}
#ProvBtn
{
   background-position: -50px 0;
}

Comment enlever cet espace?

Navigateur: Firefox 3.5

IE8

Answer 1

Le saut de ligne entre les deux crée un espace entre eux sur la page. Vous devez supprimer le saut de ligne, ou utiliser ce truc :

Answer 2

Surpris que personne n'ait encore mentionné cette méthode :

Le problème est l'espacement blanc entre les deux boutons qui est rendu. Tout espace blanc (retours à la ligne, tabulations, espaces) entre les boutons sera rendu comme un espace unique par le navigateur. Pour corriger cela, vous pouvez définir la taille de police à 0 sur un élément parent.

J'ai ajouté DIV#button-container autour des boutons et un style pour montrer le truc de la taille de police.

Note : j'ai également dû changer la position sur l'image de fond du bouton que vous avez liée car elle avait quelques pixels d'espace supplémentaires autour. Peut-être que cela faisait partie du problème, peut-être pas.

Voici un lien vers le fiddle: http://jsfiddle.net/dHhnB/ et le code:

#button-container
{
   font-size:0;    
}
.PostBtn
{
   background: url(http://img22.imageshack.us/img22/5066/capturebtn.png) no-repeat;
   width: 50px;
   height: 28px;
   border: none;
   margin: 0;
   padding: 0;
}
#NeedBtn
{
   background-position: -4px 0;
}
#ProvBtn
{
   background-position: -59px 0px;
}

Answer 3

Vous pouvez utiliser le CSS pour le corriger. Définissez float:left ou float:right sur les boutons d'entrée. Cela a résolu le problème pour moi.

Answer 4

Essayez d'utiliser une réinitialisation CSS - cela pourrait résoudre le problème de différence de navigateur : http://meyerweb.com/eric/tools/css/reset/reset.css

Answer 5

Je vois qu'ils ont une hauteur et une largeur définies. Ajouter overflow: hidden devrait masquer l'espace vide en dehors de votre largeur définie. C'est une alternative à l'élimination de l'espace vide, comme l'a remarqué @Pikrass. Habituellement, l'espace vide est un problème d'IE, je ne l'ai pas remarqué dans FF avant.