Line Spacing in the WordPress Editor

When you enter content into a post or page in the WordPress Visual Editor, do you sometimes find that you are not happy with how far apart the lines are spaced?

There is a simple little trick to make some lines closer together while leaving the default ones with the same gap.

 

What you need to do,
is to press the Shift key and
hold it down while you press
the Return (or Enter) key. 

See the (subtle) difference in the gap between lines in the above statement as opposed to the rest of this post?

The degree of difference between these two methods will vary depending on your WordPress theme.

 

For those who’d like to know more…

The reason it works this way, is all to do with HTML of course.

The average content that you type into a post or page becomes an HTML paragraph. The theme styling of your website has a definition of the gap before and after each paragraph, and the size of this gap varies between themes and websites.

Whenever you press the Return (or Enter) key, the Visual Editor makes it a new paragraph, which puts a gap between the previous paragraph and the one you just created, according to your theme’s styling.

When you hold down the Shift key as you press the Return (or Enter) key, the Visual Editor inserts a Line Break (carriage return and line feed in the olden days terms) which just starts you on a new line, the same as  would happen when you got to the end of a line and kept typing, and the line would ‘wrap’.

This way, you get to control when to start on a new line, but without the gap between paragraphs.
You don’t always want this, as paragraphs make it easier to read the content, and the gaps add a little to the flow or meaning of the content, so best to use it only when it is appropriate.

Now, as always, the effect of this will vary depending on your WordPress theme’s styling definition.

If you try this on your website, and it makes no (or very little) difference, then either comment on this post, or use my Contact page, leaving details of your website and where on your website it isn’t working, and I’ll have a look and tell you why?

, ,

4 Responses to Line Spacing in the WordPress Editor

  1. Adam Bean January 2, 2012 at 5:09 pm #

    Hey Wayne
    I have had an ongoing battle with my blog trying to fix this exact issue, and have never been able to find a fix before. Cheers for sharing this great tip, one less tech issue for me this year! Lol

    Cheers Beanie

    • wayne January 2, 2012 at 7:47 pm #

      Hi Beanie,
      ’tis a pleasure to be able to help out.
      And keep coming back for a read, as this is why I finally decided to start blogging, to share what I’ve learned over many years in the industry with those who are busy trying to just use it to run their business.
      I’ve had the privilege to learn what’s under the covers as well as using it, so I know how it ticks, and know lots of ‘easier’ ways to do things in general.
      Cheers, Wayne

  2. @KrishnaEverson January 2, 2012 at 9:56 pm #

    Thanks Wayne, another gem, can I share it on my wordpress facebook page? Cheers, Krishna

    • wayne January 3, 2012 at 2:38 pm #

      Hi Krishna, absolutely!
      The whole idea is to help people be able to look after their websites quicker and easier, with (hopefully) less problems.
      Cheers, Wayne

Leave a Reply