How to Remove the Space Between the Widgets Sidebar for WordPress

By Melissa King

Edit WordPress stylesheets to give your blog a custom look.
i Pixland/Pixland/Getty Images

In WordPress, widgets allow you to add a variety of features and custom content to your blog's sidebar. With widgets, you can show blog visitors an archive of your posts, a custom search bar or your latest Twitter posts. WordPress automatically puts a gap between each widget for aesthetic purposes. These gaps, however, reduce the amount of content a reader can see on the page before they have to scroll down. Adding a line of code to your blog's custom.css file lets you get rid of these gaps.

Open your Internet browser and go to your WordPress website. Type your user name and password, if prompted. Click "Log in."

Click "Appearance" on the left side of the screen. Click "Editor."

Click "custom.css" under the Styles heading to view your website's custom stylesheet.

Add the line ".custom li.widget {margin-bottom:-10px !important;}" to the custom.css stylesheet. Exclude the quotation marks when adding the line.

Click "Update File."

Click your site's name at the top of the page to view the changes. If a gap still remains between the widgets, return to the custom.css stylesheet.

Change "-10" to "-15." Check your website for change. Try larger negative numbers until the gaps are completely eliminated.


If you only want to eliminate the gap between two widgets, add a blank text between those two widgets. Apply the code "<div class="widget_space_1">" to the text widget, excluding the outer quotation marks. Go to the custom.css stylesheet and add the code ".widget_space_1 { margin-bottom: 0px; }" to the bottom of the page. Try changing the "0" to a negative number, such as -10 or -15, until you get the results you want.


Use caution when editing your website's code. Removing or changing certain code may cause undesirable changes. Consider making a backup copy of the code before changing it in case a problem occurs.