Impact du code HTML sur le rendu final d'une page Web Le cas des éléments de type en-ligne

Caractères d'espacement les plus courants: l'espace, la tabulation, et le retour à la ligne

Commençons avec un exemple simple :

Exemple 4: 
<p><span>alsacreation</span><span>s</span></p> 
<p><span>alsacreation</span> <span>s</span></p> 
<p><span>alsacreation</span> 
<span>s</span></p>

Avec ce code, on obtiendra le rendu suivant :

alsacreations alsacreation s alsacreation s

On remarque que le cas où les deux span sont séparés d'un espace donne le même rendu que lorsque le deuxième span passe à la ligne. Pourtant, dans ce dernier cas, on n'a pas utilisé le moindre caractère "espace" !

L'explication est simple: on n'a pas utilisé de caractère "espace", mais on a utilisé d'autres caractères d'espacement. Les caractères d'espacement sont, pour les plus courants: l'espace, la tabulation, et le retour à la ligne.

Le cas particulier des images

Par conséquent, les deux notations suivantes sont équivalentes:

Exemple 5: 
<span>alsacreation</span> <span>s</span> 
 
Exemple 6: 
<span>alsacreation</span> 
<span>s</span>

Ici, c'est le retour à la ligne (retour chariot) qui est interprété comme une espace.

Tout cela semble simple et évident lorsqu'il s'agit de texte et de chaînes de caractères. Si l'on coupe un mot, alors on verra apparaître une espace à l'endroit de la coupure... cela tombe sous le sens.

Par contre, on se laisse parfois surprendre pour le même comportement, que l'on trouvait "logique" dans le cas d'une chaîne de caractères, dans les cas où il ne s'agit pas de lettres, mais d'autres éléments de type en-ligne, comme par exemple des images.