How to Add White Space Between Elements in React JSX

Learn a few different ways of how to add white space between elements on the same line in React JSX

Sometimes you need a bit of space between two elements on the same line, e.g. a label and an email link. In both HTML and JSX you could code it like this:

<span>Email us:<a href="mailto:yourcompany@gmail.com">yourcompany@gmail.com</a></span>

Which on this website you’re on right now would look like this:

Email us:yourcompany@gmail.com

Unfortunately, that doesn’t look good. It’s too stuffed, we need some breathing room (spacing) between the Email us label and the email link. Just a little bit.

So how do we get that space?

In regular HTML we could just add a space, just like you add space between words in a sentence. But that won’t work in React JSX. The space will be gone when the view renders in the browser.

Add space with a non-breaking space

One way to add spacing in JSX is to use a non-breaking space  , like this:

<span>Email us:&nbsp;<a href="mailto:yourcompany@gmail.com">yourcompany@gmail.com</a></span>

Result:

Email us: yourcompany@gmail.com

Yep, that works.

Perhaps in your particular use case, you want a bit more spacing? Just add another non-breaking space, so you have two next to each other   .

I’ve heard that non-breaking spaces can have unintended side effects in React, so use it with discretion. I’ve yet to experience any issues myself.

Add space with curly braces + quotes

You can also add spacing in JSX by using double or single quotes inside curly braces {" "}, or {' '}, like this:

<span>Email us:{' '}<a href="mailto:yourcompany@gmail.com">yourcompany@gmail.com</a></span>

This seemed to be a popular solution when I was researching this topic, but I’m not a fan. It can work, but, if you’re using flexbox on any of the parent elements of the element that has the {' '}, then the space is removed.

The non-breaking space   approach works regardless of whether flexbox or other CSS properties are involved.

Or just use CSS

You can always add paddings or margins (CSS spacing properties) to add the spacing you need. The benefit of this method is that it allows you to precisely add the amount of space you need in pixels, rems, ems, or whatever unit you prefer.

You can either add the CSS inline:

<span>Email us:<a style={{ marginLeft: '.5rem' }} href="mailto:yourcompany@gmail.com">yourcompany@gmail.com</a></span>

Or create a separate CSS class:

.footer-email-link {
    margin-left: .5rem; /* 4px */
}

And add it:

<span>Email us:<a className="footer-email-link" href="mailto:yourcompany@gmail.com">yourcompany@gmail.com</a></span>

Both will work in JSX.

Which approach is best?

All the examples I showed you are viable solutions for specific use cases. Consider the context, instead of pondering which method is “superior”.

Whichever approach you choose, always think about whether your choice fits within the current system that you work in. If your codebase is big and growing, hopefully, you follow some guidelines Use a solution that is consistent with those guidelines. This is crucial if you work with a team.

If you have no system, just pick the approach you prefer yourself 😉