How to adjust margins and paddings of widgets in blogger templates

In this post i will show you how to adjust the margins and padding's of the sidebar widgets and the posts so I'm going to use the minima template



always download a backup copy of your template before doing anything or use a test blog as i can not be held responsible if you mess your blog up.


As you can see, the browser has added space at the bottom of the sidebar widgets. In CSS, this space is called "margins" and "paddings" now the following CSS code is where the sidebar widgets and the main post get their margins and padding's from

.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}


as you can see it is using the shorthand property which sets all padding's and margin properties the first part of the value 0 is assigned to margin-top from there it's clockwise 0 is assigned to margin-right 1.5em is assigned to margin-bottom, and the margin-left is inherited from the margin-right which is set at 0 you could of just wrote the above CSS code like the following

.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin-top:0;
margin-right:0;
margin-bottom:1.5em;
margin-left:0;
padding-top:0;
padding-right:0;
padding-bottom:1.5em;
padding-left:0;
}


i prefer the first method now if you do not want to adjust the main widgets padding or margin just replace the above CSS code with the code below

.sidebar .widget{
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}
.main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}


now change the padding of the sidebar widget's to whatever you need here's an example

.sidebar .widget{
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0; /* resets the padding on all 4 side's */
}


and here's a screenshot of the sidebar widgets with the above code applied



now you can play about with the margin's and padding's on your blog i hope you find this helpful and don't forget to leave your comment

19 Responses to “How to adjust margins and paddings of widgets in blogger templates”

Ok, so the best way to reach me is inspiredmaniablog {at} gmail {dot} com,
maybe you could explain better there?
Any help is appreciated!

@Senator
explain what ?

Hi Lawny! I forgot where we were at... LOL Do you know how to size the photos in blogger? Thanks!

hi again,kindly i want to know how to add the,about,home etc below my header,dont know if u call it the navigation link,you are easy to follow,thanx a heap,
cheers

@ruthleen
hi I've already wrote a tutorial showing you how to add a navigation bar it can be found HERE

You have no idea how you have transformed me! LOL

Thank you so much...

I will link you to all my sites...

@Mariposa
Thanks

Lawny - I just added the standared Feedburner Email Subscription gadget to my blog. It is really big. Can I adjust the margin/padding to just this one gadget and not adjust the others?

@Jeff
Edit the feedburner widget and add some inline styles to the <p> tags to reset the margin and padding so it looks something like

<p style="padding:0;margin:0;"></p>

I did that when I first copied the html for it. See my blog here. Maybe that could be something you could teach us next is how to do a subscribe box like you have.

@Jeff
i have looked in your blogs source code and i can't see any inline styles on the paragraph tags in your feedburner widget

Thanks for this post. Ive been searching for this topic for 20 mins but i got answers from your post only. Keep it up.

Detailed Info = More Visits. :)

More power :)

how to adjust the width of followers widget? that thing above did not work for me. I want your followers widget look but i want mine to be 5X4 instead of 7X4 squares like yours

you know the trick?

@tim
this post doesn't include editing the widgets what is the url of your site ? and what are you trying to do ?

I tried this, and it didn't work. I am trying to add widgets to the main section, and no matter what I do, I can't get them closer together.

http://simplydebtest.blogspot.com/

@Deb
it does work you need to tweak the css code since you are using a different template the codes maybe different try using code like

.main .widget h2{
margin:0;
padding:0;
}

this damn helpful!

Thanks for your help! I was able to make my blog look much neater!!

you don't know how much I love you right now...
Thanks!

Leave a Reply

Comments are moderated before appearing on site, comments that contain suspicious information, self-advertising or spam-like URLs will be deleted.

Note: only a member of this blog may post a comment.

Copyright © 2016 All Rights Reserved | Privacy Policy | Disclaimer Design by LawnyDesigns | Powered by Blogger