How to Add HTML Blank Space Between Text with Code

Sharing is caring!

This post contains everything you need to know about how to add HTML blank space between text with code.

If you are anything like me, getting a blog post to have the ‘correct’ (what I envision as correct) spacing can sometimes be difficult.

Lots of times these spacing issues tend to be related to the default setting in the WordPress (or other platform) or the theme that you are using.

However, if you know a little bit of code this is an easy enough fix. And adding html blank space code between paragraphs or list items becomes a breeze.

Standard HTML Blank Space in WordPress code

&nbsp – non-breaking html paragraph spacing – 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> in the Text Editor and then toggle back to the Visual Editor, when you update the page it will remove those breaks and put you right back where you started.

<p></p> – paragraph tags – Creating a paragraph space is pretty easy. Wrapping your text with a paragraph tag will give you a line break after your paragraph.

Line Breaks Between List Items

If you are using bulleted or numbered lists in WordPress, you will see that by default, the bulleted items are stacked without any space between them.

And for most circumstances this is fine.

The regular default spacing looks like this:

• Resizing Images with PicMonkey
• Smartphone Tips & Tricks
• How to Hide Images in a Blog Post
• What is WordPress HTML?
• Google Like a Pro

The code looks like this:

<ul>

<li>Resizing Images with PicMonkey</li>

<li>Smartphone Tips & Tricks</li>

<li>How to Hide Images in a Blog Post</li>

<li>What is WordPress HTML?</li>

<li>Google Like a Pro</li>

</ul>

With a short list with no descriptions, this looks great. But what if there is accompanying text, like a definition or description for each item? But maybe it would look better with spacing like this:

• Resizing Images with PicMonkey – A step-by-step tutorial of how to use PicMonkey to resize your blog and social media images easily.
• Smartphone Tips & Tricks – Smartphone tips and tricks that not everyone knows about that will make your life a little simpler.
• How to Hide Images in a Blog Post – Having multiple pin images in your blog post can make your post look cluttered, but with a little bit of code you can easily hide images in your posts so that they will still be available as an option for pinning to Pinterest.
• What is WordPress HTML? – Learning the very basics of HTML is a huge perk as a blogger will make your blogging life a lot easier.
• Google Like a Pro – Knowing how to search the internet is effectively is a a necessary skill in today’s tech driven world.

HTML BLANK SPACE For Bullet and Number Lists in WordPress

As I’ve mentioned before, most things can be solved if you know a little bit of code! In this case, adding html paragraph spacing is simple.

Here’s how you can create WordPress html blank space between bullet or numbered list items:

Click the Text tab in the upper right hand corner of your Editor. 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 beginning of each bulleted or numbered item, the entire code would be:
<li style=”padding-bottom: 16px;”>

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

This may also vary because different themes have different default line settings built into the theme and you may find that you want more space between items.

Voila! HTML paragraph spacing for bulleted or numbered lists.

There is another way…DRY

Often, when working with code you will go through many iterations or versions. You may start out with something very basic in order to test something out. (The method above is often how I would start to get a feel for how to work out this particular problem.) However, there is often a better way.

In programming, there is a principle that is considered a best practice, which is to ‘keep your code DRY.’ DRY is an acronym for Don’t Repeat Yourself (DRY), the main aim of which is to reduce repetition of code. As opposed to WET, which is a cheeky abbreviation for Write Everything Twice, the opposite of DRY principles. If you are interested and want to read more about DRY vs. WET coding principles you can read this article from Codementor.

So trying to adhere to DRY coding principles, once I figured out how I wanted my spacing to look, I would go back over my code and refine it. Instead of having to repeat the same line of code for each list item, I would create a custom class for my list that I want special spacing on and then add the CSS to my Additional CSS in my Customizer in the WordPress dashboard.

Refining the code

Click the Text tab in the upper right hand corner of your Editor. Find your list that you want to apply special spacing to.

Remember: if you highlight the beginning of your list in the Visual Editor, when you switch to the Text Editor, your list will be highlighted there as well making it much easier to find.

Now, add a class name to the opening tag of your list, in this case it it an unordered list <ul>. It should look like this:

<ul class=”custom-spacing”>

The class name can be anything you want. However, another best practice in coding is keeping your class names relevant. So if someone else (or even yourself) were to look at or edit your code in the future, you will know what that code is referring to. Because I want this list to have some special spacing properties, the class name I chose is “custom-spacing”.

Then you can add your CSS to Additional CSS in the WordPress dashboard (Appearance > Customize > Additional CSS).

The code will look like this:

/* Custom Spacing */ <– this line is a comment in CSS. It is for people to read…not a computer.
.custom-spacing li {
padding-bottom: 20px;
}

.custom-spacing li {
padding-bottom: 20px;
}

Once the code is added, you can click Publish in your Customizer. Then go an check out your newly spaced out custom list.

Now You Know How to Add Space in HTML

And that is all there is to it!

With the Additional CSS feature in WordPress, adding some custom CSS code to your site is very easy and not scary at all.

CSS is relatively harmless as far as messing around with code. If you don’t like the results you just erase what you added and it goes back to the default look.

Would love to what you think of this simple tutorial and if you gave it a try on your own site. Let me know in the comments below.

Sharing is caring!