Reduce Space Between Gadgets In Blogger blog

How to Reduce Space Between Gadgets(widgets) In Blogger blog:

By default large space is there between gadgets(widgets) in Blogger blogs. We can decrease or increase the space between gadgets(widgets) in blogs. This posts will help you to reduce space with out adding any CSS code to Blogger, just simply change(decrease) margin values in Blogger template.

Follow below simple steps to Reduce Space Between Gadgets(widgets) In Blogger blog

Step 1 : Go to Blogger Dashboard

Step 2 : Click on Template

Step 3 : Click on Edit HTML (and tick expand widget templates box in old template)

Step 4 : Search Below Code

.main-inner .widget {
background-color: $(widget.background.color);
border: 1px solid $(widget.border.color);
padding: 0 $(widget.padding.side) 15px;
margin: 20px -16px;

Decrease values in margin attribute like below
margin: 10px -10px;

If you want decrease more space give small values in margin attribute.

Step 5 : Click on Save Template.


  1. interesting

  2. I'm having trouble finding the code you listed. I typed it into the search box, and nothing comes up. The only thing I can find is:
    .main-inner .column-left-outer {
    width: $(main.column.left.width);
    right: 100%;
    margin-left: -$(main.column.left.width)

    Any advice on how I can still change the width between the gadgets? I am wanting to add side bar labels that are customized with a picture.

  3. hello, I am trying to decrease the space between the text and archives label on the sidebar. do you know how i can fix this? thanks

  4. Hello Abby
    what text?, plz tell me clearly

  5. please how can i separate my sidebars gadget from my blog main body. this has being my major problems and it has being restricting me in doing so many things as a blogger.

  6. Hi Olushola Moses, How you want to separate?