CSS <a> problèmes de marge de bordure

Question

J'ai un problème de modèle de boîte intéressant ici. J'ai un en-tête plein de liens, et pour une raison quelconque mes marges 0px sont ignorées et apparaissent comme des marges de 2px entourant chaque lien.

J'ai configuré une page de test au http://www.gimmesomeoven.com/test.htm pour illustrer le problème. Chaque lien dans l'en-tête doit être un lien carré de 56px avec une bordure de 1px et 2px entre chaque lien (au lieu de 4 comme il affiche). Dans ce cas, j'ai dû mettre en place des marges négatives sur chaque lien, mais ce n'est certainement pas le cas idéal.

Pour une raison quelconque, les choses ne s'afficheront pas correctement. De plus, cette solution ne fonctionne que dans les navigateurs modernes: IE8, Chrome, FF3 + (merci browsershots.org ..)

Toute aide à ce sujet serait grandement appréciée. Cela s'est avéré beaucoup plus difficile que prévu.

Answer 1

Je pense que le problème est que vous avez des espaces entre chaque <a>. Essayez de les flotter à gauche pour écraser les espaces, sauf si vous voulez mettre tout ce code sur une ligne dans votre code HTML. Vous devriez être capable de vous débarrasser des marges négatives alors ... vous ne devriez pas en avoir besoin ici.

Answer 2

Voici ce que je pouvais faire pour corriger votre balisage:

Supprimer cette règle de style:

#recipes a { 
padding: 0; 
margin: 0 -2px -2px 0; 
border: 1px solid #fff;} 

Modifier le style .img comme suit:

.img { 
width: 56px; 
height: 56px; 
background: url(images/header_test.jpg) no-repeat; 
display: inline-block; 
padding: 0; 
margin: 0 -2px -2px 0; 
border: 1px solid #fff;} 

Il ressemblait à les deux règles de style différentes affectaient exactement le même groupe d'éléments. Aussi, assurez-vous que le texte entre le point d'ancrage ouvert et balises proches est au moins un espace disque, comme dans:

<a class="img" href="#">&nbsp;</a> 

Answer 3

Semble l'affichage: inline-block est à l'origine de ces. Une raison spécifique pour cela? I essayé (grâce à Firebug)

• rendant les marges à 0 pour #recipes a
• changement display: inline-block-display:block pour img
• ajoutant float: left à #recipes a

et cela semble être le désire Solution.

Answer 4

Utilisez display: block au lieu de les faire flotter.

Ajouter ces propriétés à votre balise <a> pour inline-blocs croisée parcourir:

display: inline-block; 
display: -moz-inline-box; 
-moz-box-orient: vertical; 
vertical-align: top; 
zoom: 1; 
*display: inline;