90

For the longest time, I have wanted to understand why the browser adds an empty space between rendered HTML elements when there is a NewLine between them, for example:

<span>Hello</span><span>World</span>

The html above will output the “HelloWorld” string without a space between “Hello” and “World”, however in the following example:

<span>Hello</span>
<span>World</span>

The html above will output a “Hello World” string with a space between “Hello” and “World”.

Now, I have no problem accepting that this is just the way it works period, but the thing that bugs me a little is that I was always under the impression that spaces (or newlines) between the html elements would not matter at the time when the browser rendered the html to the user.

So my question is if anyone knows what the philosophical or technical reason behind this behavior.

Thank you.

qalep
  • 77
  • 7
Rene
  • 2,115
  • 2
  • 15
  • 14

6 Answers6

84

Browsers condense multiple whitespace characters (including newlines) to a single space when rendering. The only exception is within <pre> elements or those that have the CSS property white-space set to pre or pre-wrap set. (Or in XHTML, the xml:space="preserve" attribute.)

David Z
  • 128,184
  • 27
  • 255
  • 279
  • 1
    or `white-space: pre-line;` – Andrew Evt Dec 18 '17 at 09:12
  • @AndrewEvt As far as I can tell, `pre-line` still does cause multiple spaces to be collapsed, except for newlines. Though your comment did lead me to find `pre-wrap`. – David Z Dec 18 '17 at 09:20
  • For me "white-space" was set to "break-spaces". My problem was solved after removing this property. – mrasoolmirza May 31 '22 at 08:46
  • For future readers, I found [this MDN article](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Whitespace) helpful in understanding how the browser determines where to add whitespace. – incutonez Jun 09 '22 at 15:25
62

Whitespace between block elements are ignored. However, whitespaces between inline elements are transformed into one space. The reasoning is that inline elements might be interspersed with regular inner text of the parent element.

Consider the following example:

<p>This is my colored <span class="red_text">Hello</span> <span class="blue_text">World</span> example</p>

In the ideal case, you want the user to see

This is my colored Hello World example

Removing the whitespace between the two spans however would result in:

This is my colored HelloWorld example

But that same sample can be rewritten by an author (with OCD about the HTML formatting :-)) as:

<p>
  This is my colored
  <span class="red_text">Hello</span>
  <span class="blue_text">World</span>
  example
</p>

It would be better if this was rendered consistently with the previous example.

Franci Penov
  • 74,861
  • 18
  • 132
  • 169
  • I've just come across this as I'm facing the same issue. Nice, explanatory answer. It would be nice if browsers required a space between the spans in the above example regardless of the new line. I know there may then be issues with text editors such as Sublime, which can be made to trim white space, but it would make more sense to me. Could this not be down to the doctype (transitional, string etc.)? I mean we host a number of websites which use the same markup, but I notice the white spaces a lot more on some sites than on others. I'll keep an eye on this in case the doctype is the reason. – ClarkeyBoy Jul 03 '12 at 20:07
  • 2
    FWIW the two HTML snippets are not equivalent, the latter will be rendered with leading and trailing whitespaces. – McSinyx Dec 21 '21 at 05:23
24

you can use the html comment tag to connect the code to avoid the space.

<p>
  This is my
  <span class="red_text">Hello</span><!--
  --><span class="blue_text">World</span>
  example
</p>
Al Foиce ѫ
  • 4,195
  • 12
  • 39
  • 49
Zhang Qun
  • 347
  • 2
  • 5
21

HTML is specified to do it like that:

Line breaks are also white space characters

http://www.w3.org/TR/REC-html40/struct/text.html#h-9.1

webjunkie
  • 6,891
  • 7
  • 46
  • 43
4

If you had the character 'a' between two tags, you would expect it to get rendered. In this case, you have a character '\n' between two tags; the behaviour is analogous, and consistent ('\n' is rendered as a single whitespace).

SquareCog
  • 19,421
  • 8
  • 49
  • 63
-2

Browsers make a mistake here:

http://www.w3.org/TR/html4/appendix/notes.html#h-B.3.1

SGML (see [ISO8879], section 7.6.1) specifies that a line break immediately following a start tag must be ignored, as must a line break immediately before an end tag. This applies to all HTML elements without exception.

Thomas Müller
  • 9