Adding Spaces Between Paragraphs or Bullet Points in WordPress

 In Tips and Tricks

If you’re like me, getting a blog to space correctly without using elements in Visual Composer or a blog template can be difficult. I’m not super good at HTML coding and it seems like the standard spacing insert code doesn’t always work.

Quick Fix for Double Space on Enter in WordPress: Single Line Return

Shift+Enter – Use the Shift Key and Enter Key for a single space between lines and avoid a paragraph (double line spacing). The Enter key is used as a way of saying “new paragraph.” The Shift–Enter combination is used in WordPress as a way of saying “new line, not new paragraph.

 

To edit code for specific spacing, start by clicking the Text Editor when in a new post text area.

Code to Know: Standard WordPress Spacing HTML

&nbsp – non-breaking space – typically used to create a wrap or to move text to the next line. Don’t use this for creating spaces.

</br> – line break – this serves as a traditional carriage return. Similar to pressing return in Word. However, a lot of WordPress themes have an HTML filter that removes empty or open tags. So while this might show correctly when you insert a </br> and toggle between text and visual composer, but when you Update the page it will remove those breaks and put you right back where you started.

<p>, </p> – Creating a paragraph space (similar to the annoying paragraph spacing that comes default with Microsoft Word) is pretty easy. Wrapping your text with a paragraph tag will give you a line break after your paragraph.

 

Line Breaks for Bullet Lists

If you are using bulleted lists in WordPress, you’ll see that by default, the bulleted items are stacked without any space between them. I’ve struggled to get the correct spacing to carry through

Ordinary spacing looks like this:

The code looks like this:

<ul>

<li>Responsive Web Design</li>

<li>SEO</li>

<li>Social Media Management</li>

<li>Brand Development</li>

<li>Graphic Design</li></ul>

This presents fine with a short list with no descriptions, but what if there is accompanying text? Doesn’t it look better like with spacing like this:

  • Responsive Web Design – Impactful website design for dramatic presentation and effective branding for your business. We work exclusively with WordPress and are experienced in ongoing site management and data tracking.
  • SEO – Get found in search engines when you need it most. Take advantage of your ability to generate leads from generic searches and dominate Google Page 1 for things you want to be found for.
  • Social Media Management – From brand recognition to business verification, we’ll help you connect with your clients and fans across multiple social media platforms including Facebook, Twitter, and Instagram.
  • Brand Development – If your just starting out as a new business or looking to create a new image for your brand, we work through brand conceptualization, logo development, stationery design, and all the brand elements you’ll need to hit the ground running.
  • Graphic Design – Our proposals, posters, and environmental graphics will knock the socks off your potential clients and put you in a position to make the sale!

 

Bullet and Numbered List Spacing in WordPress

Here’s how you can create spaces in bullet points and numbered lists:

Click the Text tab in the upper right hand corner of the text box. At the beginning of each bullet point or number, you’ll see a <li> tag. All you have to do to create a space is add this code to the beginning tag.

style="padding-bottom: 16px;"

So at the front of each bulleted or numbered item , the entire code would be:
<li style=”padding-bottom: 16px;”>

(If you do copy and paste this code, replace the WordPress curly quotes with straight quotes.)

You can adjust the padding spacing (16px) to whatever you’d like your line spacing to be.

 

READ MORE:

Creating Custom Bullet Point Lists in WordPress
How to Make Revolution Slider Look Better on Mobile

 

 

Start typing and press Enter to search