How do I prevent Pug from collapsing all whitespace between two tags?

Question

When I do this in a template:

div(class="field")
    label Password
    input(type="password")

I get this output:

<div class="field"><label>Password</label><input type="password"></div>

So the label and input tags have zero space between them, instead of the single space between them that they would have in a normal HTML file where they're on two different lines.

How do I get that standard single space between the two elements, in a Pug template, in the least ugly possible way? I could use CSS to fix the spacing, but that seems like a lot of verbosity to add, just to get what is a standard HTML feature when you aren't using Pug.

Answer 1

The Pug documentation demonstrates how to control whitespace using pipe characters.

div(class="field")
    |
    |
    label Password
    |
    |
    input(type="password")

This should render:

<div class="field">
    <label>Password</label>
    <input type="password"/>
</div>

Answer 2

In Pug Template, a space between the elements can be added by including a PIPELINE like this- | after an element and putting whitespace after the pipeline character.

Example-

span.price 200
| //- Whitespace included
span.person per person

Pipeline character allows to include content outside of the element. I hope this answer will be helpful for someone.

Answer 3

This does what I want/expect (put exactly one space between the two elements, in the rendered HTML output).

div(class="field")
    label Password
    = ' '
    input(type="password")

Using the = operator at the beginning of a line allows you to insert a Javascript expression. So here, I'm inserting a string containing a single space.