Qu'est-ce qui cause un espacement inégal entre ces boutons?

Question

Je ne peux pas comprendre ce qui est à l'origine de l'espacement inégal que vous voyez dans l'image http://i.imgur.com/AZoXzYf.png (ne peut pas intégrer encore d'images ... désolé) qui vient de http://playclassicsnake.com/Scores. Mon CSS pertinent est

.page-btn { background: #19FF19; color: #FFF; border: 0; border: 3px solid transparent; } 
.page-btn.cur-page { border-color: #FFF; cursor: pointer; } 
.page-btn + .page-btn { margin-left: 5px; } 

et j'ai inspecté les éléments pour m'assurer qu'il n'y a rien de poisson. Quel est le problème?

Answer 1

Vous avez un caractère de nouvelle ligne dans votre code HTML juste après votre premier bouton:

<button class="page-btn cur-page">1</button> 
<button class="page-btn">2</button><button class="page-btn">3</button> 

Faire tout en 1 ligne et il va commencer à travailler sans espaces supplémentaires:

<button class="page-btn cur-page">1</button><button class="page-btn">2</button><button class="page-btn">3</button> 

Votre CSS est parfaitement bien et n'a pas besoin d'être modifié comme mentionné par d'autres ..

Answer 2

Essayez de faire la taille de la police du contenu parent 0, essayez également letter-spacing mise à 0.

Answer 3

Salut maintenant essayer cette css

#page-btns-holder { 
    width: 80%; 
    margin-top: 12px; 
    font-size: 0; 
} 
div#page-btns-holder * { 
    font-size: 14px; 
} 
.page-btn { 
    background: #19FF19; 
    color: #FFF; 
    border: 0; 
    border: 3px solid transparent; 
    display: inline-block; 
    vertical-align: top; 
    font-size: 14px; 
} 

Définissez votre btndisplay inline-block et supprimer l'espace à inline-blockelement définir votre brevet font-size:0; et enfant définir font-size:14px; comme ça je vous donne l'exemple

Remove Whitespace Between Inline-Block Elements