+ ^{having a white-space inbetween caused by a line-break}

Question

The following HTML snippet is rendered with a whitespace between the two words (with a line-break between both lines:

<span>foo</span>
<sup>bar</sup>

However

<span>foo</span><sup>bar</sup>

is rendered without a whitespace between both words.

So why does the line-break cause this behavior. Line-break or not should not influence the rendering here!?

Not just the line-break. Any white-space character does that... — Šime Vidas, Jan 19 '12 at 15:03
Might be useful: [How to remove the space between inline-block elements?](http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements) — Šime Vidas, Jan 19 '12 at 15:05

score 3 · Accepted Answer · edited Jan 19 '12 at 15:07

3

They are treated as white space, so one or more line-breaks are treated as a single whitespace (just like all the other white space characters)

A line break is defined to be a carriage return (), a line feed (
), or a carriage return/line feed pair. All line breaks constitute white space.

http://www.w3.org/TR/html401/struct/text.html#line-breaks

edited Jan 19 '12 at 15:07

Wesley Murch

101,186
37
194
228

answered Jan 19 '12 at 15:07

Alex K.

171,639
30
264
288

I believe [this](http://www.whatwg.org/specs/web-apps/current-work/multipage/) is the preferred HTML standard now. – Šime Vidas Jan 19 '12 at 15:09

score 0 · Answer 2 · answered Jan 19 '12 at 15:08

In general, a line break is equivalent to a space in HTML. There are some exceptions, and according to formal rules on line breaks, the break should be ignored on two accounts (it immediately follows a start tag and immediately precedes an end tag). But browsers never implemented such features properly, so they treat your markup as equivalent to

<span>foo</span> <sup>bar</sup>

The conclusion is that you should write an end tag and a start tag on the same line, if you wish to have no space in content between the elements.

You can have line breaks inside tags, though, e.g.

<span>foo</span><sup
class=zap>bar</sup>

score -1 · Answer 3 · answered Jan 10 '16 at 00:58

For CJK (Chinese Japanese Korean) characters, it might be hard to find the break point, it is possible to insert booststrap's <span class="sr-only"></span> as the way to break the line for better code reading, example:

这是一<span class="sr-only">
</span>行无空格的文字

+ ^{having a white-space inbetween caused by a line-break}

3 Answers3

Linked

+ having a white-space inbetween caused by a line-break

3 Answers3

Linked

+ ^{having a white-space inbetween caused by a line-break}