Smart Girls Add Padding: Tutorial on Adding Padding to Your Images

Sometimes a small thing can make a big difference. When it comes to creating a website or blog that is visually appealing, those little details really count.

Enter the term “padding”. If you’re not familiar with it, it means just what it says…padding or space between two objects. Here’s an example of what I mean.

Which looks better?

There once was a girl who started a blog. She wanted it to look nice so people would like to visit often and read all that she had to say. This girl loved to write about her life, her dog and all the funny things that happened to her every day.

She often added photos to her posts to add interest and break up all that type. But unfortunately this girl didn’t know about a little thing called padding and her words ran right into her photos.

Poor girl…if only she know how simple it was to fix this little problem.

****

Now take  a look at this…

There once was a girl who started a blog. She wanted it to look nice so people would like to visit often and read all that she had to say. This girl loved to write about her life, her dog and all the funny things that happened to her every day.

She often added photos to her posts to add interest and break up all that type. And fortunately this girl knew the importance of making sure there was a little padding between her photos and text so her words wouldn’t run right into her photos.

What a smart girl!

****

So how do you add padding? Its super simple; and the “how” depends on what platform you’re on. Check it out:

Blogger, TypePad or WordPress.com – If you are on Blogger, TypePad or WordPress.com, you get off Scott free. Padding is automatically added for you when you upload a photo to your post. Sweet!

Self Hosted WordPress – If you have a self hosted WordPress blog (where you have purchased a hosting account…) it all depends on your theme. Some themes have padding built into the CSS code and you dont have to do a thing. If, however, you find that your text and your photos bump into each other you, need to add it yourself. There are a few different options to do this:

1. Add it manually. Each time you add an image, just add these few steps to add the padding:
   Once your image is inserted where you want it, just click on the image and an “image” and “cancel” icon will show up in the top left corner.
   Click on the “image” icon and a window will pop up.
   Click on “Advanced Settings” and scroll down to “Image Properties”.
   In the “Vertical Space” and “Horizontal Space”, enter a value between 7-10. This is the number of pixels you are telling WordPress to put around your photo.
2. Change your CSS permanently. This is a little more involved but will take care of the problem permanently. Each theme is written a little differently, but hopefully you will be able to easily adapt these steps to your theme
   Go to the “Appearances” section on the left hand side of your dashboard (WP 2.7).
   Click on “Editor”.
   Now navigate to a file called “stylesheet.css” or “styles.css” or something similar to that.
   Once you have that file open in the editing window, scroll to where you see some code that reads “img.alignleft” or “image.left” or something similar.
   Add the following line to this bit of code:

   
   padding: 7px;
   
   So your “img.alignleft” tag looks something like this (leave whatever else is in that code…just add the above line):

   img.alignleft{
   display: inline;
   padding: 7px;
   }

   You’ll want to do this for both the “right” and “left” image tags, so go back and add this same line for whichever one you didn’t already do.

Pretty simple, huh? And your blog will look just a little better and be more reader friendly!

This post contains sponsored links.