Why Does the Browser Renders a Newline as Space

Why does the browser renders a newline as space?

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.)

Why does the browser not render a line break caused by a trailing newline character inside a white-space: pre element?

Why? Well, to avoid compatibility problems, apparently.

The W3C says:

In order to avoid problems with SGML line break rules and inconsistencies among extant implementations, authors should not rely on user agents to render white space immediately after a start tag or immediately before an end tag.

and also:

Note that the white space processing rules have already removed any tabs and spaces after the segment break before these checks [on the value of the white-space property] take place.

Now it is not clear exactly which inconsistencies would be introduced if the browsers were allowed to keep the whitespace before the end tag, but there you have it.

Why is space shown in browsers when in source code '\n' is used?

Updated answer:

In the comments below you've said that the result you're looking for is "ab" right next to each other, with no space or line break at all between them.

If "a" and "b" are really text, I don't believe you have any option, you have to remove the linebreak if you want them next to each other. (I realize you said you didn't want to do that, I'm just saying, I don't think you have a choice.)

If "a" and "b" are elements (you've said you're outputting a big form), you can play games with negative CSS margins, but it gets ugly fast. Or the old trick of moving that line break into a tag, e.g.:

<input name="a" type="text"
><input name="b" type="text"
>

The line break within the tag is not displayed (because it's in a tag, not text).

The link below on inter-element whitespace may also help, depending on your overall markup; basically there are times the browser will disregard whitespace between elements, so you might be able to adjust things slightly to make it do that.

You've said you're using it for readability. I suppose another option, although it's really verbose, is to put the line break in a comment:

form field here<!--
-->next form field here<!--
-->next form field here

...but again, quite verbose (and probably not doing much for readability).

Your best bet is what you said you don't want: Remove the linebreak. :-)

Original answer:

(From when it was unclear that you wanted "ab" right next to each other; just about everyone thought you wanted to have the line break shown.)

Why is space shown in browsers when in source code '\n' is used?

Because the HTML standard says that all sequences of whitespace characters (other than inter-element whitespace) are treated as a single space. So for HTML, a newline, space, tab, carriage return, and formfeed are all exactly equal: They're displayed as a space.

How can I avoid this "space" without removing line-break?

There are a few ways:

You can use a br element:
```
a<br>b
```
You can put a and b in separate containers that use block display (both p and div do by default, and you can use CSS to apply display: block to others).
```
<p>a</p>
<p>b</p>
```
or
```
<div>a</div>
<div>b</div>
```
etc
If you really want that newline to be treated as a line break, you can use a pre element, which has special handling of pre-formatted text
```
<pre>a
b</pre>
```
...and you can apply that same sort of handling to other elements using CSS's white-space style (values pre, pre-wrap, and pre-line).

Line breaks causes spaces in the html

This is a common issue with the whitespace and how it's handled by browsers. There are many similar questions and answers, like this one.

Basically you can use display: block and float: left or if you are using a template rendering engine, they may provide helpers for removing the whitespace, like {strip} in Smarty or {% spaceless %} in Twig. There are other ways to achieve this in HTML, google and search SO.

New line between anchors in HTML source creates empty space in browser

Anchors are inline elements. If you add a white-space (space, tab, newine, ..) between the elements, a gap will appear.

Depending on the situation, you can use either of the following methods to get rid of the gap:

Add a negative margin-left, e.g. margin-left:-4px;
Use float, e.g. float:left;
Remove the whitespace between the elements. To keep the code somewhat readable, you can break after the opening tag, eg:
```
<a href="..">Link</a><a
   href="..">Link 2</a>
```

Why Does the Browser Renders a Newline as Space