Pourquoi les petits espaces continuent-ils à apparaître dans mes pages Web?

Question

C’est peut-être une question stupide, mais s’il existe une façon plus appropriée de procéder, j'aimerais bien l’apprendre.

Je l'ai rencontré plusieurs fois, y compris récemment, où de petits espaces apparaissent dans la version rendue de ma page HTML. Intuitivement, je pense que ceux-ci ne devraient pas exister, car en dehors du texte ou des entités, le formatage du code HTML d'une page ne devrait pas avoir d'importance, mais apparemment, c'est le cas.

Ce dont je parle est la suivante: j’ai un fichier Photoshop du client indiquant comment il souhaite que son site soit conçu. Ils veulent que cela ressemble fondamentalement pixel parfait à l'image dans ce fichier.

L’un des emplacements de la page appelle une barre de menus, où chacun fait le changement de son en vol stationnaire, agit comme un lien hypertexte, etc. Dans le fichier Photoshop, il s’agit d’une longue barre. Pour ce faire, il suffit de scinder ce segment en plusieurs images, puis de les placer côte à côte dans le fichier.

Donc, instinctivement, je l'exprime comme ça (il y a autre chose mais c'est l'essentiel)

<a href="page1.html">
  <img src="image1.png" />
</a>
<a href="page2.html">
  <img src="image2.png" />
</a>
<a href="page3.html">
  <img src="image3.png" />
</a>

et ainsi de suite.

Le problème est que les images ont un espace minuscule entre elles, ce qui est inacceptable, car le client veut que cette chose soit parfaite au pixel (et que ça a l'air tout simplement mauvais).

Une façon de le rendre correctement consiste à supprimer les retours chariot entre les images

<*>

Ce qui fait que les images se superposent (l’effet souhaité), mais rend la ligne incroyablement longue et le code plus difficile à maintenir (cela enveloppe ici dans SO et c’est une version simplifiée - la vraie a plus de temps les noms de fichiers et JavaScript sont parsemés pour faire le vol stationnaire).

Il me semble que cela ne devrait pas se produire, mais il semble que le retour à la ligne dans le code HTML se présente sous la forme d'un petit espace vide. Et cela se produit dans tous les navigateurs, on dirait.

Ai-je raison ou tort de penser que les deux extraits ci-dessus doivent rendre le même résultat? Et y a-t-il quelque chose que je fais mal? Peut-être enregistrer le fichier avec le mauvais encodage? Devrais-je faire de chacun de ces liens un élément CSS parfaitement positionné?

Answer 1

Les espaces (retour chariot compris) sont généralement affichés sous forme d'espace dans tous les navigateurs.

Vous devez placer les éléments l'un après l'autre, mais vous pouvez utiliser une astuce:

<a href="page1.html"><img src="image1.png" 
/></a><a href="page2.html"><img src="image2.png" 
/></a><a href="page3.html"><img src="image3.png" 
/></a>

Cela a aussi l’air un peu moche, mais c’est quand même mieux qu’une seule ligne. Vous pouvez changer la mise en forme, mais l’idée est d’ajouter des retours à la ligne dans les éléments et non entre eux.

Answer 2

Je ne sais pas si cela est assez général pour votre page, mais vous pouvez classer ces balises a en particulier et les faire flotter toutes à gauche. Elles se regrouperont alors quelle que soit la qualité de votre code HTML. formaté.

<style>
    a.together {
        float:left;
    }
</style>

<a class='together' href="page1.html"><img src="image1.png" /></a>
<a class='together' href="page2.html"><img src="image2.png" /></a>
<a class='together' href="page3.html"><img src="image3.png" /></a>

Answer 3

Cela fait partie de la spécification HTML: les espaces sont dans le balisage et sont donc considérés comme faisant partie du document.

La seule autre option dont vous disposez, puisque vous n'aimez pas le formatage, consiste à casser les balises html:

  <a href="..."><img src=".." /></a
  ><a href="..."><img src=".." /></a
  ><a href="..."><img src=".." /></a

ce qui est indésirable à mon avis, ou créer le code HTML de manière dynamique - via JavaScript ou en utilisant un système de templates et un code HTML dynamique.

Answer 4

La raison est simple: en HTML, l’espace, ça compte, mais une fois seulement. Les espaces blancs répétés sont ignorés, seul le premier est affiché.

Le seul moyen fiable d'éviter cela est, comme vous l'avez fait, de ne pas laisser d'espace blanc entre les éléments.

Lorsque la présentation basée sur un tableau est moins visible qu'auparavant, vous pouvez utiliser un tableau de remplissage zéro pour aligner vos éléments tout en les disposant sur des lignes séparées dans le code source.

Answer 5

La façon dont je gère cela consiste à utiliser une liste non ordonnée et à faire de chaque image / lien un élément. Utilisez ensuite CSS pour afficher chaque élément en ligne et faites-les flotter à gauche.

Cela vous donnera beaucoup plus de flexibilité et rendra le balisage très lisible.

Answer 6

Le comportement que vous avez démontré ci-dessus est vrai, car le navigateur considère les retours à la ligne comme des espaces. Pour résoudre ce problème, vous pouvez l’appeler ainsi avec:

a { display: block; float: left; }

Veuillez noter que la règle ci-dessus s'applique à tous les liens. Par conséquent, vous souhaiterez peut-être restreindre le sélecteur à certains éléments uniquement, par exemple:

#nav a { display: block; float: left; }

Answer 7

Si vous envisagez de créer une interface à onglets sur un site Web, veillez à le faire correctement, et cela en vaudra la peine. Il existe de nombreux sites Web avec d'excellents exemples d'implémentations d'onglets CSS. Pensez à en utiliser un.

Celui-ci a beaucoup d'onglets CSS + Javascript / AJAX. Ou consultez cet ensemble d'exemples CSS simples (certains stylés). Enfin, consultez ce générateur d'onglets , qui est vraiment très joli.