How to single space in WordPress – 3 easy ways

It is really important to control your text when you create content. And how to single space in WordPress is one of the skills you need to master.

Actually, you need to understand why single space vs double space is important and how to use, manage and control the spacing.

The good news? It is really easy.

But first, let’s look at why it is important to control single space and double space when you create content for your website.

Making it easy to digest your content

When we create content we need to avoid producing a wall of text.

Noone enjoys seeing massive blocks of text when they arrive at your website.

Instead, use short and snappy sentences.

We make it easy to read. We create contrast and scanner stoppers where the readers can rest their eyes.

Finding structure is important when we arrive at a new text. And this page has so far hopefully been easy to read.

But it could also have looked like the image below. I have made the text fuzzy so you do not think you have to read it again.

Use spacing to create a better user experience

How to single space in WordPress using Gutenberg Block editor

To create single line space in the Gutenberg Block editor is as easy as SHIFT + ENTER when we start a new line.

Single space comes in handy when we want to write information that needs to be grouper together for context.

Writing an address or recipe for a cake are examples where single space makes more sense.

And also, when we use single space as well as double space we create contrast and the form of text becomes more pleasing to the eye.

Create single space and double space with the Gutenberg block editor

How to single space in WordPress using Classic editor

Creating single space in the Classic Editor can be done in two ways.

The maybe easiest way is to click the Text tab in the top right corner of the Classic editor. Now we can simply type and use ENTER when we want to start a new line with single space.

To start the new line with double space you just hit ENTER twice.

Create single space with Classic editor

 Another way is to use the PRE or Preformatted  . If you know a bit of HTML you know that we use the <P> tag to start a new paragraph. 

Now if you want to start a new single line space row you can simply add the BREAK tag <BR /> after the last word of the sentence.

Create single space with Preformatted setting in Classic editor

How to single space in WordPress using CSS

You can also control single space in WordPress via CSS if you want the spacing to apply for more than just the sentence you are working on.

Let’s say that we want to change the spacing for all paragraphs. But we do not want other headlines or quotes to be affected.

Let’s look at how we would do it, step-by-step. And stay with me. It is not difficult and you may learn something new..

1. Locate sample text to work with

First we need to locate text to be able to see which HTML tag that is controlling the CSS style of the text in our paragraphs.

Lets go to one of our pages and select one paragraph of text

How to select or highlight text to find the HTML tag
The text we have selected with our mouse pointer is marked with blue background

2. Time to “inspect” the selected text

Now, we right-click the text and choose “Inspect”. Two scary looking windows will open to the right on your screen.

Right click + inspect to open up two more windows

3. Locate the HTML tag

Looking at the text we have high-lighted we can see that the same text is available in the column marked 2 in the image above. 

Locate the HTML tag <p> in the inspect window

The text we are looking for is surrounded by the P for paragraph tag. There is an opening <P> tag and then after the paragraph ends there is a closing </P> tag.

4. Locate the HTML tag in the CSS column

We now know that we have to edit the CSS for the <P> tag if we want to change the single spacing of the paragraphs in our posts.

Locate the P tag in the column marked 3.

Locate the CSS for the <P> tag in the third inspect window

In my example the CSS code looks like this. This is the code that we need to amend. Stay with me, it is easy – I promise.

p {
   margin-bottom: 1.5em;
}

5. Update CSS code tro achieve your desired look

Now you simply update your CSS to look like below

p {
   margin-bottom: 1.5em;
   line-height: 3em;
}
Update CSS and inspect to find result

Not this was not the line spacing we were looking for but now we are in contol. All that is left now is to find a value that will give us the look we want.

And there you have it, but one last piece of advice when it comes to editing CSS.


Always backup or save the original file when you are editing CSS. You never know what can happen and it is better to be safe than sorry.


Meet the author: Serial entrepreneur and travel industry expert with more than 20 years working experience from web development, Wordpress and the travel industry. Mattias is a big fan of Open Source and will show you how to build and manage a website using Wordpress and a bit of optional PHP for the true enthusiast. Mattias identifies with self-starters and entrepreneurs and also shares ideas on how to monetize a website.