How to Remove the Space Between the Widgets Sidebar in WordPress

1. Visit your WordPress blog in a browser and right-click to select 'View Page Source.' Find your widgets in the code and look for the class name they share:
Many themes use 'widget' in the class name, as shown in the example above.
2. Log in to WordPress and navigate to 'Appearance' from the sidebar on the left. Load the Edit Themes screen by clicking the 'Edit' link. After you load the screen, the style.css file you need will display in the editor box.

3. Read through your style.css code and look for any styles that reference the class used by your widgets, such as the following:.widget {padding: 10px 20px;margin: 20px auto;}
4. Edit the values of the margin properties as needed. Because widgets stack one on top of the other in a sidebar, edit the vertical values of the margins. When dealing with such CSS shorthand as 'margin: 10px 20px;' (instead of 'margin-left: 20px;'), edit the first value. In the example, margin will become 'margin: 0px 20px,' which will remove any space on the top and bottom of the widget, between it and other widgets. When dealing with 'margin: 10px 20px 10px 20px,' change the second and fourth value to zero pixels. The four margin values in this case go clockwise around the edges of the widget, starting with the top.
5. Make the same changes to the padding properties as you did to the margin properties. Values work the same way in both property types, so their order is the same. The difference between margins and padding is that margins will set the space between widgets while padding sets space inside the widget. Often the visual effect of the two properties is the same, except when a widget has a background color. Leave padding alone if you want to maintain the space between the edge of the widget and its contents.