web-dev-qa-db-fra.com

Espacement CSS indésirable entre les éléments de balise d'ancrage

J'ai cette feuille de style:

*{
    padding: 0px;
    margin: 0px;
}

a{

  background:yellow;

}

et cette page web:

<a href="/blog/">Home</a>
<a href="/about/">About</a>
<a href="/contact/">Contact</a>

Résulte en:

enter image description here

Comment puis-je faire en sorte que ces balises d'ancrage se "touchent", supprimant cet espace indésirable entre les deux?

merci Luca

htmlcssanchormargin
27
luca

Vous devez supprimer l'espace blanc (dans ce cas, la nouvelle ligne) entre vos balises. Certains navigateurs le rendent sous forme d'espace.

32
Alex Feinman

Vous pouvez utiliser cette astuce pour vous débarrasser de l'espace:

HTML:

<div id="test">
    <a href="/blog/">Home</a>
    <a href="/about/">About</a>
    <a href="/contact/">Contact</a>   
</div>

CSS:

#test { font-size:0; }
#test a { font-size:16px; background:yellow; }

Démo en direct: http://jsfiddle.net/quucy/

29
Šime Vidas

Je pense que je pourrais trouver un moyen assez cool de le résoudre :-). J'ai commencé avec le fait d'utiliser <!-- comments --> pour remplir vide < span >s etc.

Donc, si vous voulez conserver votre structure d'ancrage sur une nouvelle ligne et ne voulez pas les espaces entre eux ... ouvrez simplement un commentaire de bloc à la fin de la ligne et terminez-le sur la nouvelle ligne juste avant la nouvelle < anchor >

Comme ça:

<div id="test">
    <a href="/blog/">Home</a><!--
    --><a href="/about/">About</a><!--
    --><a href="/contact/">Contact</a>   
</div>

et DEMO: http://jsfiddle.net/Lukis/reZG2/1/

15
Lukáš Řádek

L'espace entre les liens peut être produit par des caractères de nouvelle ligne que vous avez dans votre code, mais cela dépend vraiment du navigateur dans lequel vous obtenez ce comportement (certains navigateurs ignorent ces caractères, d'autres non).

Essayez de mettre les trois balises sur une seule ligne et sans espaces entre elles.

<a href="/blog/">Home</a><a href="/about/">About</a><a href="/contact/">Contact</a>
4
brezanac

Que diriez-vous de les mettre dans la structure ul/li?

#test li {
    background:yellow; 
    float: left;
    list-style: none;
}
<ul id="test">
  <li><a href="/blog/">Home</a></li>
  <li><a href="/about/">About</a></li>
  <li><a href="/contact/">Contact</a></li>
</ul>
3
J.T. Houtenbos

Toutes les réponses ci-dessus montrent des façons intéressantes de se débarrasser de cet espace indésirable, mais je ne vois pas celui que j'utilise depuis près d'une décennie; voici donc une autre solution simple à votre très vieux problème pour les personnes qui luttent encore avec cet espace - utilisez float!

HTML:

<div id="test">
  <a href="/blog/">Home</a>
  <a href="/about/">About</a>
  <a href="/contact/">Contact</a>   
</div>

CSS:

#test { 
  overflow:hidden; 
 /* this isn't really required here but helps; 
 or use your preferred method for clearfix  */
}

#test a { 
  float:left; 
  background: yellow;
}

jsfiddle:http://jsfiddle.net/fjj7dsyx/2/

2
lost-and-found