This tutorial will show you how to manage the space between paragraphs, images, and Ads on your website, using HTML or CSS. You can choose which you prefer, and the cool part is, the main code is the same for both.

Don’t worry if you’ve never used code on your website before, this will be straight forward and easy to do.

Add Or Reduce Space Between Paragraphs Using HTML or CSS Img3

Spacing Paragraphs With HTML/CSS:

Note: Before making any changes to your website, create a backup. The following is not advice, simply information. Seek professional advice if you’re unsure.

Want To Watch The Video Instead?

How Does HTML Work?

Adding a space between paragraphs, images and adverts, is actually quite straight forward. However, before we jump into it, there are a few of things you need to know:

  • HTML is a programming language used to create and edit websites. The snippets of code we will use today are for styling a web-page, and will have no other effect on your website. You can learn more about HTML at W3Schools, a great free resource for all website owners.
  • This guide will show you how to edit ‘on-page’ HTML. That means, editing within the area you would normally write your blog post, or web page, in.
  • Everything has a name in HTML. For example, a block of text is normally called a paragraph. When you view a paragraph in HTML, you’ll see a <p> tag before it, and a </p> tag afterwards. So a HTML paragraph looks like this:

<p>This is a paragraph in HTML.</p>

OK, let’s get started.

HTML: Add Or Reduce Space Between Paragraphs

Step 1: View your website page (or WordPress block) in HTML. For WordPress users, click on the text block you want to manipulate so that the menu bar above the block appears. Next, hit the 3 dots on the right-hand side, and then select, Edit as HTML.

How To Edit In HTML WordPress Blocks 1

Now you can edit your paragraph in HTML.

A Paragraph in HTML

Step 2: Insert the following HTML into the first <p> tag, just after the p, as shown below:

<p style=”margin-bottom: 80px;”>add an 80 pixel space below this paragraph with HTML.</p>

<p>This sentence is now lower as a result of the HTML applied to the paragraph above.</p>

HTML: Space Between Paragraphs Code

Let’s break down the HTML code we just used: style=”margin-bottom: 80px;”

style=” “ – This wraps around our styling commands. We put our styling code inside the quotation marks (” “).

margin-bottom: – This command concerns the space below the paragraph. We could regulate the space to the right of the paragraph by writing: margin-right:. Also available is: margin-left: and margin-top:.

80px; – This is the distance we want to create. It is measured in px, representing pixels on the screen. Don’t miss the semicolons at the end. Every command within style=” “, needs to end with a ; (semicolon).

Finally, if we wanted to manage all 4 sides of an object, we could simply write: margin:. Then we could add 4 values for each side, like this:

margin: 10px 20px 20px 10px;

Here, the first number represents the top margin, followed by right, bottom, and left -going in a clockwise sequence.

HTML: Reduce Space Between Paragraphs

To reduce the space between paragraphs, instead of writing 80px, we could write 0px, or even -20px.

The “margin” function will space objects farther apart, or draw them in closer together. If you do use -- (minus) values, it may result in an overlapping of objects, as they appear on the screen.

That said, there is nothing stopping you from reducing the distance between paragraphs by using the following code:

margin-bottom: -50px;

Don’t forget to add the code after the <p, and inside the style=” “. -Like this:

<p style=”margin-bottom: 80px;”>add an 80 pixel space below this paragraph with HTML.</p>

CSS: Add Or Reduce Space Between Paragraphs

CSS, a code specifically designed to allow you to change the style of your website, can also use the “margin” function.

If you don’t know how to add CSS to your website, check out this post.

With CSS, you can add a snippet of code that will effect all objects, of that type, on your website. Here’s a good example:

h1 {color: red;}

This code will make all of your website header-1 text red, like in this image (fig.1):

Space Between Header Text and Paragraph CSS example

We can also do the same thing with “margin“:

h1 {margin-bottom: 80px;}

You can see the result above, in fig.1 (right side).

Let’s take a look at the code we just used; h1 {margin-bottom: 80px;}

h1 – This is the identifying name for the main header text on your web-page.

{ } – This time, instead of quotation marks, we have these braces, inside of which, we will put our code.

margin-bottom: 80px; – This is our code -the same code we used above in HTML. Again, note the semicolon!

To apply this to all of your paragraphs, instead of the main header text, you simply need to replace the h1 with a p. Like this:

p {margin-bottom: 80px;}

CSS: Reduce Space Between Paragraphs

To reduce the space between paragraphs, instead of writing 80px, we could write 0px, or even -20px.

The “margin” function will space objects farther apart, or draw them in closer together. If you do use -- (minus) values, it may result in an overlapping of objects, as they appear on the screen.

That said, there is nothing stopping you from reducing the distance between paragraphs by using the following code:

p {margin-bottom: -50px;}

How To Add Or Reduce Space Between Images and Ads

You can use the same code to add or reduce space around website images and adverts.

Just place it within the tag (<p> for example), if it’s HTML, or after an identifier (h1 for example), if it’s CSS.

If you found this post helpful, please help me by sharing it on social media, or backlinking to it from your blog. Thank you.

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *