Page history Edit this page How do I edit this website?

Whitespace

This page explains ways to manage whitespace rendering. It demonstrates how the site treats whitespace, illustrating common techniques, pitfalls, and workarounds to achieve needed formatting.

Inserting newlines

Default newline behavior

Code

What's
*up*?

How
are you?

Result

What’s up?

How are you?

Two spaces at end of line

Code

Hello  
there

Result

Hello
there

NB: This is a Markdown feature; note that there is no whitespace rendered after “Hello” at the end of the line.

Two backslashes at end of line

Code

What happens \\
if we use backslashes?

Result

What happens
if we use backslashes?

NB: This is a kramdown feature; note that there is a space included after “What happens” at the end of the line, because we included one before the backslashes.

Using an explicit <br>

Code

*Lions*<br>and **tigers**

Result

Lions
and tigers

Aligning text

Most fonts are variable width, and so you cannot rely on the characters lining up over multiple lines:

Code

+-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=+\\
| -=-=- Initializing Invincibility -=-=- |\\
+-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=+

Result

+-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=+
| -=-=- Initializing Invincibility -=-=- |
+-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=+

Aligning via code fences

If you need fixed-width font, you can use code fences:

Code

```
+-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=+
| -=-=- Initializing Invincibility -=-=- |
+-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=+
```

Result

+-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=+
| -=-=- Initializing Invincibility -=-=- |
+-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=+

Aligning via span style

If you really just want a fixed-width font, without additional styling, you can use the style attribute on a surrounding <span> element:

Code

<span style="font-family: monospace">
+-=-=-=-=-=-=-=-=-=-=-=-=-+\\
| -=- I'm *Invincible!* -=- |\\
+-=-=-=-=-=-=-=-=-=-=-=-=-+
</span>

Result

+-=-=-=-=-=-=-=-=-=-=-=-=-+
| -=- I’m Invincible! -=- |
+-=-=-=-=-=-=-=-=-=-=-=-=-+

But if you do this on a block-level HTML element such as <div>, you won’t be able to mix in Markdown anymore:

Code

What are you going to do, bleed on me?
<div style="font-family: monospace">
+-=-=-=-=-=-=-=-=-=-=-=-=-+\\
| -=- I'm *Invincible!* -=- |\\
+-=-=-=-=-=-=-=-=-=-=-=-=-+
</div> You're a loony.

Result

What are you going to do, bleed on me?

+-=-=-=-=-=-=-=-=-=-=-=-=-+\\ | -=- I'm *Invincible!* -=- |\\ +-=-=-=-=-=-=-=-=-=-=-=-=-+

You’re a loony.

…unless you add markdown=1 to the element in question:

Code

What are you going to do, bleed on me?
<div style="font-family: monospace" markdown=1>
+-=-=-=-=-=-=-=-=-=-=-=-=-+\\
| -=- I'm *Invincible!* -=- |\\
+-=-=-=-=-=-=-=-=-=-=-=-=-+
</div> You're a loony.

Result

What are you going to do, bleed on me?

+-=-=-=-=-=-=-=-=-=-=-=-=-+
| -=- I’m Invincible! -=- |
+-=-=-=-=-=-=-=-=-=-=-=-=-+

You’re a loony.

…or wrap the Markdowny parts in a <span markdown=1>.

Multiple spaces in a row

Normally, multiple spaces are squashed into one:

Code

It's a   REALLY   big deal!

Result

It’s a REALLY big deal!

If you want the extra spaces to stay, use HTML’s &nbsp; code:

Code

It's a &nbsp;&nbsp;&nbsp;REALLY&nbsp;&nbsp;&nbsp; big deal!

Result

It’s a    REALLY    big deal!

Preventing lines from wrapping at whitespace

Normally, lines can wrap wherever there is whitespace:

Code

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.

Result

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

If you don’t want it to wrap at a particular place, you can use &nbsp; instead of a regular space, but for whole paragraphs as above, it quickly becomes tiresome. Another way is to use a styled span:

Code

<span style="white-space: nowrap">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</span>

Result

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Beware of leading whitespace

If you use more than three spaces to indent lines, the Markdown processor will think you meant a code block:

Code

It works to indent 4 spaces without a leading blank line:
    although you may be surprised that it continues on the same line.

But if you indent 4 spaces after a blank line, watch out:

    Markdown kicks in, treating it as a block of code.
Even if a subsequent line is not indented!

Result

It works to indent 4 spaces without a leading blank line: although you may be surprised that it continues on the same line.

But if you indent 4 spaces after a blank line, watch out:

Markdown kicks in, treating it as a block of code. Even if a subsequent line is not indented!