How to Adjust Borders and Paddings of Widgets

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 */
}

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