Différence de rendu en fonction des sauts de ligne

Bonjour tout est dans le titre :), je viens de remarquer une différence d’interprétation entre deux séquences HTML et j'aimerais qu'on m'explique le pourquoi du comment:

Si j'écris:

Code:

---

<i class="fa fa-dollar fa-fw"></i><span class="title">Gestion des comptes clients</span>

---

Et ça

Code:

---

1 2	<i class="fa fa-dollar fa-fw"></i> <span class="title">Gestion des comptes clients</span>

---

l’interprétation varie, en effet je me rend compte qu'il y a un espace invisible (certes assez subtile) qui bousille la mise en page surtout si on a alterner les deux notations.

Je précise que ce problème n'a été constaté que sous chrome pour le moment, néanmoins j'aimerais savoir ce qu'il en retourne, si quelqu'un connait ce phénomène.

N'arrivant pas à formuler la problématique vous comprendrez facilement le titre évocateur de ce sujet.

D'avance merci.

C'est un effet souhaité (et souhaitable).
Pour les navigateurs, un saut de ligne correspond à un espace, ce qui est plutôt utile lorsqu'on écrit de longs textes sur plusieurs lignes.

D'accord merci, il faut donc faire attention à ce genre d'effet lorsqu'on travail en groupe...

Une autre question avant de marquer le sujet en résolu, comment computer le saut de ligne ? avec une entité je pense, mais c'est histoire d'avoir un avis d'expert :D

En HTML, un saut de ligne, c'est la balise <br />.

Bonjour,

Citation:

---

l’interprétation varie, en effet je me rend compte qu'il y a un espace invisible

---

il s'agit des fameux whitespace très souvent responsable de prise de tête surtout quand l'on veut coller des éléments en inline cote à cote..

Oui en fait je m'exprime mal mais NoSmoking à bien compris mon problème je pense, en fait dans mon éditeur lorsque j'effectue un saut de ligne et effectivement entre deux éléments inline, ou inline-block, j'ai un whitespace qui vient se positionner entre ces deux éléments.

Je ne cherche pas a effectuer des sauts de ligne en HTML mais à reproduire l'action de l'éditeur lorsque je saute une ligne entre deux éléments type inlines. Il y a effectivement un whitespace qui est interprété sur le navigateur mais qui est invisible sur mon éditeur et qui pose un problème pour le travail d'équipe car nous devons décrire le problème, le normaliser et ajouter une procédure afin d'avoir un résultat identique d'un développeur à un autre.

Ah! ce foutu whitespace indispensable, indispensable car il permet de séparer par un espace le . de la phrase qui se termine de la première lettre de celle qui commence lorsque l'on veut écrire un code "lisible", avec des retours à la ligne. Sa taille varie suivant la police/taille des caractères et surement aussi des navigateurs.

Néanmoins grace à lui ces 2 codes auront le même rendu

Code:

---

1 2 3 4 5 6 7 8

<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. </p>

---

D'accord mais pour les menus, éléments en inline ou inlline-block, par exemple, c'est la galère il casse toute la mise en page.
Avec le css suivant

Code:

---

1 2 3 4 5 6 7

ul { background-color:#abc; } li { display:inline; background-color:#fff; }

---

et le html ci dessous

Code:

---

1 2 3 4 5

<ul> <li>Menu #1</li> <li>Menu #2</li> <li>Menu #3</li> </ul>

---

c'est la cata...

Il existe cependant plusieurs façons de le supprimer à commencer par le bout à bout

Code:

---

1 2 3

<ul> <li>Menu #1</li><li>Menu #2</li><li>Menu #3</li> </ul>

---

super efficace mais parfois difficile à maintenir, sur l'exemple c'est light, d'autant que si tu fais un travail en équipe tôt ou tard il y en aura un qui reviendra à la premier écriture pour plus de lisibilité.

Autre méthode le commentaire anti whitespace

Code:

---

1 2 3 4 5

<ul> <li>Menu #1</li><!-- KILL WS --><li>Menu #2</li><!-- KILL WS --><li>Menu #3</li> </ul>

---

c'est déjà un peu plus lisible.

Quoiqu'il en soit la meilleur façon de le maitriser c'est de savoir qu'il existe et de connaître la "parade" quand le besoin s'en fait sentir, en fait il faut le supprimer.

Il existe également l'arme absolu le javascript qui va parcourir le document, ou élément, et les supprimer sans pitié!

Super l'explication merci bien NoSmoking, sujet Résolu :)