Node handlebars adds extra text node before rendered view

Question

I have the following issue: When rendering a view in a layout with handlebars, the engine adds an extra text node before the rendered view body

<nav></nav>
{{{body}}}
<footer></footer>

results in

<nav></nav>
"
[empty text node here]
                      "
<rendered view>
<footer></footer>

That empty text node has its own height and breaks my CSS margins and paddings. Note that if I put the view HTML directly in the layout without using handlebars templating, there is no text node and everything is fine.

Any ideas why is this happening and how to solve it?

Answer 1

I think I found the reason, please check your partial view file, whether there is BOM inserted in file, some editors will insert this in file with UTF-8, UTF-16 and UTF-32 format. so if you are using UTF-8, just remove the BOM will be good.

Answer 2

@leoyoo answer is the right one. I was about to post same question and found this.

On Chrome, source shows that white space character as seen below (red dot):

...and stringifies to 

I'm on Visual Studio and this is the default setting when files are saved:

When I change it to UTF-8 without signature (as seen below) that whitespace character dissapears.

On Visual Studio you do: File>>Save fileName.ext As and then drop-down next to Save button.