Question

While working on my project I’ve found out that \n in html source is displayed as space between these 2 lines in browsers. For example,

a
b

in browsers is displayed as a b. How can I avoid this “space” without removing line-break? The result I want is ab right next to each other — not on separate lines, not with a space between them.

I generate quite big form on fly using php, for readability, I use PHP_EOL that is the same as \n, but in browsers appears extra white-spaces. I want to get rid of them.

Answer 1

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:

1. You can use a br element:

   a<br>b
   

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

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