Saya mahu setiap teks mempunyai warna yang berbeza, jadi saya menggunakan berbilang kelas span untuk menetapkan warna dalam css. Saya juga mahu teks mempunyai pemisah baris, jadi saya menggunakan div. Biola ini menunjukkan hasil yang saya inginkan, tetapi teg div yang digunakan untuk pemisah baris mencipta jurang yang besar. Adakah terdapat cara lain untuk melakukan pembalut baris dalam pelbagai kelas rentang?

Fiddle: https://jsfiddle.net/nh7vswco/

<pre id="info">
       
                <div class = "fact-card">               
                <span class="animal">  animal</span>
                <span class="colon"> : </span>
                <span class="animal-name">tiger</span>
                <span class="comma">,</span> 
                </div> 
                
                <div class = "fact-card">
                <span class="animal">  species</span>
                <span class="colon"> : </span>
                <span class="animal-name">Mammal</span>
                <span class="comma">,</span>
                </div>
                
                <div class = "fact-card">
                <span class="animal">  type</span>
                <span class="colon"> : </span>
                <span class="animal-name">carnivore</span>
                <span class="comma">,</span>
                </div>

Result:
Each word and colon should have a different color.
animal : tiger,
species : mammal,
type : carnivore,

Hasil biola ini ialah biola: https://jsfiddle.net/nh7vswco/, tetapi saya mahu mengalih keluar jurang dalam tag div.