How To Add Space Between Widgets In Sidebar In Blogger- 3 Best Ways

Sometimes, when you download a new template, it does not contain the space between the widgets in sidebar. Of course sidebar looks good while it contains some gap between each widget. Meanwhile, some sidebars do look good even if they doesn't contain any space. You, yourself have to adjust the space as per your blog's requirement. In this article, we will see some of the best ways to add space between the widgets. I would suggest you to not to mess with the template's code if you are a newbie. Unless and until you know what actually you are doing.

As you can see in the above image, there is no space between the widgets. So, now we follow the below steps to add some space between them.

Step 1: Backup your template

The first and the foremost thing is to backup your template before you make any changes to your template. Once it has been messed up, you cannot restore it back again.
Select the template tab and Click on the Backup/Restore to save your file on your computer.

Step 2 -First way: Adding space using the CSS in Template Designer

• On your blogger homepage, select template.
• Click on Customize
• Click on Advance
• Select CSS. This should enable an empty box used for writing the CSS code.

Now, write the below code in that box.

#sidebar.widget {
padding-bottom: 20px;
}

If this doesn't work, then try removing "#" and mention .(dot)
You can mention the size in PX as much as you want. Once this is done, click on "Apply to Blog" on the top right of the page. And the result is as shown in the below image.

Step 3 - Second way: Adding space using < br > tag in your widget's gadget.

This is the easiest way to add space between your widgets. The < br >(remove the space before and after br) tag is used for break line,  that used mostly used in the post body. This tag is actually not used for this purpose. It is used for giving space for some particular widgets. For example, if you want to give space for 2 widgets out of 10. Follow the below steps. 

When you enter the code in the gadget, mention < br > at the bottom of the code. Do it for one widget, or two or as many as you want.

Step 4 - Third way: Adding space in the HTML template.

Most of the people follow this way. Also, I will suggest you to follow this way. As you may get some practice/experience by playing with the codes. Follow the below steps.

• From the blogger's homepage, select template.
• Click on Edit HTML
• On your keyboard, select CTRL + F. Used to find the code from the template.
• Type "sidebar" in the search box.
• Scroll down until you see the .sidebar .widget { } code.
• Once you find the block of the code, mention the below code in that block of the code. 

.sidebar .widget {
padding-bottom: 20px;
}

Or, you may also mention as,

.sidebar .widget {
margin-bottom: 20px;
}

Once this is done, click on "save template" and you are done !

If you would like to follow Danish, then follow him at Tumblr