Jeder Buchstabe in einer anderen Farbe

[Eselfant]

Hallo zusammen,

ich habe mir eine HTML-Übungsaufgabe im Internet herausgesucht und diese versucht zu lösen.
Aufgabe:
Das Wort Regenbogen soll mittig angezeigt werden. Hintergrundfarbe schwarz. Jeder Buchstabe soll eine andere Farbe haben.

Lösung HTML4
...
<font color="#800000">R</font>
<font color="#FF8000">E</font>
...

Lösung HTML5
Hier geht es mit "font color" nicht mehr. Das wird so nicht mehr unterstützt.
Variante 1
Mache ich nun für jeden Buchstaben:
<span id="p1">R</span>
<span id="p2">E</span>
...
und in CSS dann entsprechend:
#p1{ color = red; }
#p2{ color = blue; }
...
dann sieht das erstmal schon gut aus. Aber, zwischen jedem Buchstaben ist nun eine Lücke, als würde jeweils ein neues Wort anfangen. Ich habe nun noch im CSS hinzugefügt:
span{ letter-spacing: -20px; }

Meine innere Stimme sagt, das das so falsch ist. Aber eine andere Lösung fällt mir dazu nicht ein. Wie löst man das mit HTML5?

Vielen Dank im voraus
Eselfant

 

[scatello]

<span id="p1">R</p>

Da fällt dir wirklich nichts auf? span wird geöffnet und p geschlossen

 

[Eselfant]

<span id="p1">R</p>

Da fällt dir wirklich nichts auf? span wird geöffnet und p geschlossen

Entschuldige, habe es korrigiert. War ein copy-paste-Fehler. Problem ist nach wie vor das Gleiche.

 

[Sempervivum]

Du hast da einen Zeilenumbruch zwischen den beiden span-Tags. Der Browser macht daraus einen Zwischenraum. Wenn Du die Tags in eine Zeile schreibst, verschwindet dieser:

<span id="p1">R</span><span id="p2">E</span>

Wenn dir dann die Zeile zu lang wird bei vielen Buchstaben kannst Du den Umbruch innerhalb der Tags schreiben, dann entsteht kein Zwischenraum:

<span id="p1">R</span><span
id="p2">E</span>