In this tutorial, we will discuss about the most needed feature while writing a post, i.e. - how to add single line and double line spacing while writing a WordPress post.
Though this can be achieved by following a very easy step, still, many beginner users don’t know how to do it. We don’t blame them as WordPress does not have a button in the visual editor for doing this.
Before you continue with our tutorial, it’s important to know that line spacing is also controlled by the stylesheet defined in the WordPress theme you use. So, we will first show you how to add single / double line spacing in the WordPress visual editor, and then we will cover how to change the line spacing by adding extra CSS codes into your theme.
Why You Need to Add Single and Double Line Spacing
In most Word processors (MS Word, OpenOffice etc) you can easily add single line space by hitting enter button one time and can add extra blank line space by pressing the same enter key multiple times. But the default behavior of WordPress visual editor is quite different.
In WordPress visual editor, you can press enter to create a new paragraph which will automatically add double spacing in-between those paragraphs. Moreover, there is no button on the visual editor to add single line spacing after a paragraph.
In this article, you will just learn that simple trick to add single / double line spacing in WordPress.
How to Add Double Line Space in Visual Editor?
At the time of writing an article, when you press the ‘Enter’ key on your keyboard to add a line break, WordPress visual editor considers it as a request to create a new paragraph. This means that pressing the Enter button will automatically add a double line space (Every standard WordPress theme defines the styling for it).
So to add double spacing, simply press the Enter after the line and then start typing something else in the next line.
How to Add Single Line Space in Visual Editor?
Now if you are writing something which needs a single line spacing between new lines (e.g. - address), then you need to press SHIFT + ENTER key.
This will instruct WordPress visual editor that you want to start a new line inside an existing paragraph that needs single line spacing instead of double line spacing.
How to Modify the Line height and Spacing Using CSS?
Occasionally, you may observe that even if you add proper line spacing in the editor, it doesn’t display the way you want it to. Most of the cases your theme has to be blamed for the same. In that case, you have to add some CSS to your theme to adjust line spacing.
You can think CSS codes as the command line equivalent of visual text formatting. Writing CSS codes are not that hard, what most of the beginners might think. CSS is very easy to understand and very safe for any WordPress theme.
To add custom CSS to your theme, you need to visit Appearance ⇒ Customize page. Then go to "Additional CSS" tab from the customizer panel. Alternatively, you can install any of the free Custom CSS plugin and insert CSS codes into that. Some of the best ones are SiteOrigin Custom CSS, CSS Hero etc.
In the custom CSS box you need to add the following CSS code:
[css]
.post p {line-height: 1.2em;}
[/css]
The CSS rule written above will change the line spacing of paragraph content to 1.2em. The “em” is a unit of width for typography where 1em is nearly equals to 16px font size. We are using the .post class which tells WordPress to apply the settings only to the content area of all posts.
While the above code only changes the height of single line spacing, you can change the spacing between each paragraph (i.e. - double spacing) by writing the below code:
[css]
.post p {
line-height: 1.2em;
padding-bottom: 18px;
}
[/css]
The "padding-bottom" is what we use to adjust the height of double line spacing. You may change these settings as per your needs till you reach your best satisfaction level.
We hope that you have enjoyed the above article explaining how you can add single line spacing and double line spacing in WordPress. Be with us to explore free training on Leading Technologies and Certifications.
Leave us some comments if you have any questions or need further help on adjusting line spacing in WordPress posts, we will be happy to help you.
If you like our articles please like our facebook and twitter page to receive notifications on recent and updated contents.
