How To Reduce Space Between Gadgets (Widgets) in Blogger.com (blogspot)- - Screenshot

I recently made a small change to my another  blog which is also on Blogger.com (Blogspot)- reduced the space between widgets at the side bar, to make the page looks little bit shorter. I'm satisfy with the change and it's a easy fix. If you are also looking for the solution for this issue, here's my fix.

The reason that the widgets get bigger space in between is because by default, there's a 30px bottom and top margin existing for widgets- which is 60px space in total. To reduce the space,  just to change the margin to a smaller value. My fix is change the top margin to 20px, and the bottom margin to 0.

(screenshot) Left: Original space between widgets
Right: after reducing the space by change the margin-bottom to 0

Here's how to reduce the space between gadgets (widgets) to 20px:

1. From your blog dashboard, click on Template->Customize->Advanced->Add CSS (as in following screenshot)

2. Copy and paste following codes to the "Add custom CSS" screen:

.widget {
    margin: 20px 0 0 0;
}

screenshot  as below:

3. Make sure to click on "apply to template" buttom at the top right corner. Done.

Go back to your website and refresh the page, now the space space between gadgets / Widgets for your Blogger has been reduced !

It's Your Turn

How did you do to reduce space between widgets? Is there other ways to make the widgets looks better? Share your experience and insights in the comments box below.