How to Remove the Space Between the Widgets Sidebar in WordPress
Widgets are small Web applications that display in the sidebars and sometimes footers of WordPress blogs. The exact code used to display the widgets depends on your theme, the template that dictates the layout and style of your blog. You can edit the theme to change the space between widgets in the sidebar while logged in to WordPress. The Edit Themes screen will allow you to edit any file in the theme, including the style.css file that governs spacing. Edit that file to remove the top and bottom margins and padding for your widgets.
Other People Are Reading
Instructions
-
-
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:
<aside id="archives" class="widget">
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.
-
1
Tips & Warnings
Become familiar with the CSS box model so you can better understand how spacing works in Web design. This knowledge will help you avoid breaking layouts.
Back up your theme before editing its files. Then you can copy and paste the original code in the "Edit Themes" screen if you ruin the layout and cannot easily fix your mistakes.
