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.
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.
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.
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.
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
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.
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.
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.
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;
}
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.
