Why does format change when I space out my s?

Question

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?

Possible duplicate of [How I can join
with display: inline-block?](http://stackoverflow.com/questions/41112239/how-i-can-join-div-with-display-inline-block) — kukkuz, Dec 14 '16 at 02:49
`@kukkuz`, I'm seeing too many incorrect possible duplicates. I'm sure it's a duplicate of something else, though. — StackSlave, Dec 14 '16 at 02:52
its the same thing - the space you see is a characteristic of *all* `inline` elements... — kukkuz, Dec 14 '16 at 02:54

score 2 · Accepted Answer · answered Dec 14 '16 at 02:47

2

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.

answered Dec 14 '16 at 02:47

StackSlave

10,613
2
18
35

score 0 · Answer 2 · answered Dec 14 '16 at 04:33

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/

Padding right class add extra white space btween characters – Sajed Dec 14 '16 at 07:50 — Sajed, Dec 14 '16 at 07:50

score 0 · Answer 3 · answered Dec 14 '16 at 04:37

0

You should do this way:

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

answered Dec 14 '16 at 04:37

Trac Nguyen

486
4
8

score 0 · Answer 4 · answered Dec 14 '16 at 08:03

0

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>

answered Dec 14 '16 at 08:03

Sajed

445
1
8
19

Why does format change when I space out my s?

4 Answers4