En HTML, si vous indentez votre code (déjà bravo, plus personne ne fait ça ces temps-ci), vous risquez de voir des espaces apparaître à l’écran entre les éléments.

Genre avec ça :

<div>
	<span>A</span>
	<span>B</span>
	<span>C</span>
	<span>D</span>
</div>

Qui N’EST PAS totalement équivalent à ça :

<div><span>A</span><span>B</span><span>C</span><span>D</span></div>

Ce sont les \t et les \n qui se traduisent par un espace impossible à retirer avec des margin: 0.
On peut s’en tirer en mettant font-size: 0 au parent et une taille normale aux enfants.
Si votre élément parent est un flex ou grid, le problème disparaît également.

Il y a une autre solution, directement en HTML, qui permet de conserver l’indentation, en tout cas visuellement :

<div>
	<span>A</span
	><span>B</span
	><span>C</span
	><span>D</span>
</div>

Ici les balises ne sont pas séparées par des espaces. Le > fermant est renvoyé à la ligne pour faire l’indentation.

Une autre solution c’est ça :

<div>
	<span>A</span><!--
	--><span>B</span><!--
	--><span>C</span><!--
	--><span>D</span><!--
--></div>

L’espacement en \n\t est alors dans un commentaire et n’est donc pas affiché à l’écran..

— (permalink)