CODEWITHSUNDEEP
javascriptjqueryhtmlcss
KevTLW
KevTLW

Reputation: 39

Why does format change when I space out my <span>s?

So I have this line of code with 5 different spans for different colors per letter

<span style="color: #B03A2E;">A</span><span style="color: #76448A;">M</span><span style="color: #2874A6;">I</span><span style="color: #239B56;">T</span><span style="color: #B7950B;">Y</span>

However, I want my code to be organized better, so I "line breaked" the spans.

<span style="color: #B03A2E;">A</span>
<span style="color: #76448A;">M</span>
<span style="color: #2874A6;">I</span>
<span style="color: #239B56;">T</span>
<span style="color: #B7950B;">Y</span>

The problem with doing this is that it leaves the HTML output spaced out instead of together as one word. Why is this, and can it be fixed?

Upvotes: 1

Views: 88

Answers (4)

Sajed
Sajed

Reputation: 448

span {
   float: left;
}
    <span style="color: #B03A2E;">A</span>
    <span style="color: #76448A;">M</span>
    <span style="color: #2874A6;">I</span>
    <span style="color: #239B56;">T</span>
    <span style="color: #B7950B;">Y</span>

Upvotes: 0

Trac Nguyen
Trac Nguyen

Reputation: 486

You should do this way:

<span style="color: #B03A2E;">A</span><!--
--><span style="color: #76448A;">M</span><!--
--><span style="color: #2874A6;">I</span>

Upvotes: 0

Emad Dehnavi
Emad Dehnavi

Reputation: 3441

first, try to not use inline styles in tags, its not a good practice. for your case, its better to do something like this :

HTML : 

<span class="fontColor1 padding-right">A</span>
<span class="fontColor2 padding-right">M</span>
<span class="fontColor3 padding-right">I</span>
<span class="fontColor4 padding-right">T</span>
<span class="fontColor5 padding-right">Y</span>

css : 

.fontColor1{color: #B03A2E;}
.fontColor2{color: #76448A;}
.fontColor3{color: #2874A6;}
.fontColor4{color: #239B56;}
.fontColor5{color: #B7950B;}
.padding-right{padding-right:5px;}

https://jsfiddle.net/emilvr/8vfbebsr/1/

Upvotes: 0

StackSlave
StackSlave

Reputation: 10627

Line Breaks and Multiple White Spaces are treated as a Single White Space in HTML, with some exceptions like <pre>. You want no White Spaces, then bunch 'em.

Upvotes: 2

Related Questions