WordPress White Space: Getting More Breathing Room on Your Site

WordPress White Space: Getting More Breathing Room on Your Site

Most of us like our space, of course. And that often even extends to our websites.

A crowded, dense site can be an immediate turn off to visitors.

And so if you’re looking to get more space around certain elements in your site (like images, paragraphs, widget, etc.), then the tips below should help.

Dealing with the CSS in themes is always a challenge because theme authors often give different names to things. So realize that you may need to do some playing around till you find the exact element in your theme.

Also, as you’ll be changing your theme’s template files for these fixes, you’ll probably want to create a child theme if you haven’t already.

featured-white-space

A Few CSS Basics

There are a few basic CSS principles to know before we get started.

When you want to add padding or magins, there are a few ways to do it.

You basically have four directions to add padding in: top, right, bottom, and left. (Notice I list them going in a clockwise direction starting at the top. This will be important later.)

Let’s say you wanted to add 5px of padding to the top and bottom of some element, and then you wanted to add 10px of padding to the right and left of that element.

To do that, the long way would look like this:

padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;

The shorter way to do that would look like the following below.

You’ll notice there is no “top” or “bottom” or “right” or “left.” And the reason is that there’s a particular order for these numbers. It starts with the “top” at the 12 o’clock position and moves clockwise to the 3 o’clock position for “right,” then to the 6 o’clock position for “bottom,” then to the 9 o’clock position for “left.”

padding: 5px 10px 5px 10px;

Or you can use only two values if the top and the bottom are the same, and then the right and the left are the same. The first value will define the top and the bottom, and the second value will define the right and the left.

padding: 5px 10px;


Add Space between Paragraphs

If you’d like to add space between paragraphs, the first thing you’ll need to do is find the CSS class of the div for your main content.

If you view your source code on a single post and look at the area where your post begins, somewhere just above that you should see a div with a class name that’s related to your content.

In my sample, my class is named “entry-content.”

entry-content

In your CSS file, simple add space to the bottom position. You can play with the amount to add till you get what you want. I’ll over-exaggerate this and put in 40px to clearly show what it’s doing. (The “p” is for paragraphs here.)

Here’s my code:

.entry-content p {
 padding: 0 0 40px 0;
 }

Here’s my post before spacing.

paragraph-before-spacing

And here’s my post after spacing.

paragraph-after-spacing


Add Space between Widgets

In order to add space between widgets, go to your CSS file and search for “widget.” You’ll be changing the “margin-bottom” property.

You’re likely to find a lot of different CSS code for different elements of the widgets, such as the title or images in widgets, etc.

Each theme will be slightly different, so you might need to search around a little to find the main widget boxes or areas. Once you do, it’s probably easiest to just copy that whole section and put it into your child theme stylesheet , and then change the “margin-bottom” to a higher number.

For example, in one theme, this was my main widget area. It was pretty simple.

widget-1

In another theme, it was slightly more complicated: .widget-area .widget.

widget-2


Add Space between Menu Items

If you’re looking to add space between menu items in a sidebar, more than likely you’re going to be dealing with custom menu widgets. (i.e. You create a menu, then call it into the sidebar with a Custom Menu widget.)

And so that means you’ll be looking for your widget CSS again in your stylesheet. This time, however, you’ll be looking for the “.li” property, which stands for “list item.”

Once again, you’ll want to add space with the “margin-bottom” property. In my example, I’m adding 10px of space to the bottom of each item.

menu-space

Here’s my before and after for the extra 10px.

menu-before-after

And so that should work for you, but you should also know that doing it that way will give you extra space after EVERY list item in your widgets. So, for example, if you put a category widget into your sidebar, then your list of categories will also be spaced out like that.

Maybe that’s what you want. But maybe it isn’t.

If it isn’t, then there’s another solution. You can style only the specific menu items you want to style.

Styling Specific Menu Items

In order to style specific menu items, go to the menu you want to style. (Appearance > Menus > select your menu)

Open each item of the menu that you want to style, and give it a newly created class name. For example, I’m going to give my menu items the name “special-menu.”

menu-special-class

Do that for each menu item that you want to style. Then go to you stylesheet and add the CSS for that. For example, I added the following:

.special-menu {
 margin-bottom:  10px;
 }

This added an extra 10px below those menu items, but it left my widget category links, for example, as they were.

Add Space between Posts

If you’d like to add space between posts (like 50px, for example), then most likely the following will work for you.

#content .post {
 margin-bottom: 50px;
 }

If that doesn’t work, then the div ID for your content may not be labeled “content.”

This can be a little confusing because you’ll likely see a number of different div IDs, but look at your source code and see if you can figure what the div ID is for your content.

In my sample theme, it is labeled content. But I’ll show you where it is anyway.

content-div-id


Adding Space above the Header & Below the Footer

As usual, your theme may be different, and so you might have to search around a little and play with things to find the right element.

That said, you might try looking for the “body” element.

Then you can add “margin-top” and “margin-bottom” elements. Your theme might already have a top and/or bottom margin for the body, or you might have to add one.

Here’s where I found the CSS for one theme. It was listed under “body .site”.

body-site-1

And here’s where I found the CSS for a different theme. It was listed simply under “body”.

body-site-2


Adding Space around Images

As images appear in all sorts of place in your site, it’s not really practical to start trying to define each one and what type of space someone might want around a particular image. For example, there are images in posts, but then there are right-aligned images and left-aligned images and centered images and images without alignment. There are also images that appear in widgets and thumbnail images and slider images and on and on.

The important to remember is that images are styled in CSS with the “img” tag. So that’s a beginning place to start looking.

You might also take a look at this page on wordpress.org.

That said, when you’re working with images in your posts, you can also give them a custom style as we did with individual menu items above.

To do that, click the edit icon on the image in your editor.

edit-image-in-editor

When the edit screen pops up, put the name of a custom class in the Image CSS Class box under Advanced Options. In my example, I’m giving it the name “special-image.”

image-css-class

Then go to your stylesheet and style that newly created class as you like.

I’m going to add 25px of padding to the right of my image.

.special-image {
 padding: 0 25px 0 0;
 }

(Remember it goes clockwise starting at the top, and so the 25px here applies to the right edge of image.)

Here’s my before pic.

image-before-css

And here’s my after pic with extra padding out to the right.

image-after-css

And of course, once you have your special styles set up, you can apply them to any images you like.

*Final Note: You may find that your theme has two properties that are the same. For example, you may find that there are two top-margin elements – one with pixels and one with just a number, for example. If that’s the case, you will either have to change both of those numbers or eliminate one and change the remaining one.